How Gulp works?
Gulp accepts a source (can be a file, or a set of files), processes it based on a task and then passes it to the next task in the pipe for further processing. The pipes continue with processing till the last task.Â These tasks are loaded using Gulp plugins.
Plugins areÂ Node Transform StreamsÂ that encapsulate common behavior to transform files – often placed betweenÂ src()Â andÂ dest()Â using theÂ .pipe()Â method. Streams can change the filename, metadata, or contents of every file that passes through the stream.
There are a huge number of plugins provided, contributed and actively developed by community.
1.Â In order to use Gulp, we need the following tools installed: Node.js with NPM (Node Package Manager) on the machine, before proceeding.
If you donâ€™t have it installed, you can go to https://nodejs.org and download the latest stable version. Installing Node and NPM is pretty straightforward using the installer package available from the Node.jsÂ® web site. By default, the installation will include NPM.
You can check if you have installed them by visiting your command line/console and type:
If either of these commands go unrecognized, you need to follow the link above and download the appropriate installer based on your OS.
Once finished, reload your console and you can continue.
2. Next, we need to create a new project folder:
3. Create a package.json file, with:
This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults.
4. Now we have to install Gulp.js and create gulpfile.js:
To check if Gulp is installed locally and globally, we can type:
In the root project folder we should create gulpfile.jsÂ (file that contains the configurations of individual Gulp tasks)
Some of the plugins used were Gulp plugins for preprocessing, and they automatically reload the browser when we save an edited file, minify CSS, etc. Each plugin only does small amount of work, so finally they are connected like building blocks. You may need to combine a bunch of them to get the desired result. In this project Gulp is used with LESS, but only with some minor changes, it can be used with SASS. (Simply change less with scss/sass in gulpfile.js and in the command line when installing with npm, change – gulp-less with gulp-sass).
Gulp-less: (Automatically converts .less files to .css files.)
BrowserSync: (Changes a file locally and instead of having to refresh, the browser automatically refreshes or injects the changes.)
Autoprefixer: (Will use the data based on current browser popularity and property support toÂ apply prefixes forÂ you.)
Clean CSS: (Minifying CSS and SourceMaps, will reduce CSS files size, removes whitespace, strips comments, combines files, etc.)
After we have completed all of the commands in the console and created folders/files, the project root should look like this:
Write down some HTTML, LESS and JS and see how magic works :). Thatâ€™s pretty much everything you have to do!
Oh,Â just one more thing, do not forget to type: