|
1 |
| -# A Set of Gulp v4.x.x Tasks for Creating Web Projects Using HTML, CSS/Sass, and JavaScript |
| 1 | +# A Set of Gulp v5.x.x Tasks for Creating Web Projects Using HTML, CSS/Sass, and JavaScript |
2 | 2 |
|
3 |
| -(v4.0.3) |
| 3 | +(v5.0.0) |
| 4 | + |
| 5 | +--- |
| 6 | + |
| 7 | +## Before You Start |
| 8 | + |
| 9 | +1. Ensure Java is installed, because Gulp requires it for events such as browser refreshing. |
| 10 | +2. Node version `v22.14.0` was used to develop this project. Make sure you’re running *at least* that version. |
| 11 | +3. CLI version of Gulp is `3.0.0`. Ensure you’re using `3.0.0` of Gulp’s CLI. |
4 | 12 |
|
5 | 13 | ---
|
6 | 14 |
|
7 | 15 | ## Installation
|
8 |
| -Before continuing, make sure Java is installed, because Gulp requires it for events such as browser refreshing. Additionally, all the required Node modules need to be installed before you can use this template. From the root folder, type `npm install`. This will create a folder called `node_modules` and download the plugins listed under the `devDependencies` section in the `package.json` file. If you encounter an `ERR!` message about `EACCES` on macOS, then run the command as the super user: `sudo npm install`. |
| 16 | + |
| 17 | +From the root folder, type `npm install`. This will create a folder called `node_modules` and download the plugins listed under the `devDependencies` section in the `package.json` file. If you encounter an `ERR!` message about `EACCES` on macOS, then run the command as the super user: `sudo npm install`. |
| 18 | + |
| 19 | +--- |
9 | 20 |
|
10 | 21 | ## Tasks
|
| 22 | + |
11 | 23 | Typing `gulp --tasks`, or simply `gulp`, will render a list of tasks included in `gulpfile.js`. Tasks such as `build` and `serve` invoke other tasks and are executed in `<series>`.
|
12 | 24 |
|
13 | 25 | Each task can be run on its own. For example, if all you want to do is validate your HTML, you can type `gulp validateHTML`.
|
14 | 26 |
|
15 |
| -## Running the Project |
16 |
| -All your work must be added to the sub-folders under the `dev` folder: your markup in `html`, your Sass/CSS in `styles`, your JavaScript in `scripts`, and, your images in `img`. |
17 |
| - |
18 |
| -During development, run `gulp serve`, which runs multiple development-related tasks, then launches your default browser and reloads on file changes. Transpiled files (`.js` and `.css`) are written to the `temp` folder. |
19 |
| - |
20 |
| -For production-ready projects, run `build`, which creates a folder called `prod`. This is the folder you’d upload to your server if you were going live with your project. |
| 27 | +--- |
21 | 28 |
|
22 |
| -## Issues |
| 29 | +## Running the Project |
23 | 30 |
|
24 |
| -* As of 22 February 2023, this project is currently not compatible with macOS Ventura (10.13). |
| 31 | +All your work must be added to the sub-folders under the `dev` folder: your markup in `html`, your Sass/CSS in `styles`, your JavaScript in `scripts`, and, your images in `img`. |
25 | 32 |
|
26 |
| -* As of 14 October 2021, you’ll need to have [`stylelint` installed](https://stylelint.io/user-guide/get-started) to run `gulp-stylelint`, which is included in a task called `lintCSS`. However, there’s a bug in this project that, when adding the following to the `serve` task, the browser won’t reload on changes to CSS files. |
| 33 | +Run `gulp serve` while you’re developing your project. This will initiate multiple development-related tasks, then launch your default browser. File changes trigger a browser reload. Transpiled files (`.js` and `.css`) are written to the `temp` folder. |
27 | 34 |
|
28 |
| -```javascript |
29 |
| -watch(`dev/styles/**/*.css`, lintCSS) |
30 |
| - .on(`change`, reload); |
31 |
| -``` |
| 35 | +For production-ready projects, run `gulp build`, which creates a folder called `prod`. This is the folder you’d upload to your server if you were going live with your project. |
0 commit comments