Learning Gulp
Gulp is the new hotness among web developers. For those who don’t know what Gulp is, it’s simply a build system. Gulp can make your life easier by managing repetitive tasks for you. Learning curve of gulp is fairly small compared to Grunt which is also a task runner and does the same functions as Gulp. Gulp and grunt follow a modular approach. Both gulp and grunt have tons of plugins. Gulp plugins can be found here.
In order to use gulp you should have npm (node package manager) which comes with NodeJs.
Once you have Node and npm installed use the following code to install gulp globally ,
$ npm install -g gulpIf you’re using Ubuntu you probably want to use ,
$ sudo npm install -g gulpBasically gulp can be executed from command line with ‘gulp’ command. Usually at the project root gulp file is saved which is called gulpfile.js.
This file gets executed when we run the command ‘gulp’. Gulp uses the term task for each and every specific function performed by it. When you run gulp command it executes the default task.
Gulpfile consists of 4 major parts. Dependency declaration, named tasks, watch tasks, and default task. Dependency declaration part defines the modules in which our gulpfile depends on. Since gulp is using this modular approach each and every module should be installed/downloaded using npm. Dependency declaration section looks like this,
Using require, gulp modules are imported into gulpfile.js.
Named tasks are declared using gulp.task method which takes two parameters, first parameter is the name of the task and the second is a callback function which performs a specific task like minification.
Minify task which is defined in above figure demonstrates how we can minify JavaScript files in modules folder. Here wildcards are used and the extension .js is used to track down all JavaScript files in modules directory. Pipe function is an inbuilt gulp function which is similar to UNIX’s pipe function’s nature. As pipe’s arguments we can pass on the functions we need to accomplish, like ngAnnotate (ngAnnotate is used to minify AngularJs files). gulp.dest specifies the destination directory.
Next section is used to declare watch tasks. These tasks are extremely useful when it comes to process of automation which can be acquired using watch tasks.
As the name implies watch task watches the files specified in the watch method and when some change occurs, tasks passed to second parameter are executed.
Last section contains the default. This means, when we run gulp what should happen. It’s similar to a named task, but instead of a name, first parameter should be ‘default’.
Well that’s what you need to get up and running with gulp.
Conclusion
Gulp is extremely useful when it comes to automation.
Learning curve of gulp is small compared to grunt. So it’s easy for anyone to quickly set up a custom build system.
