Introduction to Gulp.js with example

Gulp is an automated task runner uses node.js. It is a build tool for the front-end javascript development. Though grunt is doing the same, gulp is overtaking grunt with increased speed and performance. If you want to know the difference between them checkout the post gulp vs grunt.

Here we will discuss on:

1. What is gulp?
2. Why to use gulp?
3. How to use gulp?

What is gulp?

As I mentioned Gulp is an automated task runner. It uses node.js ‘require’ method for loading the tasks plugins. It helps in building the javascript project through various tasks. Important of them are:

• concat – to concat(joining) the css/js files into a single css/jss file respectively
• uglify – minifying the js files using uglify.js. It is done after concatenation.
• clean – clean/delete the build folder before building the files.
• jshint – detects errors in javascript files.
• sass – convert sass into css files.
• autoprefixer – to autoprefix the css files.
• karma – to perform unit testing.
• livereload – automatically refresh the html page when any changes are made in source files.
• watch – automatically peforms the given task if any changes are done in the source files.
• useref – to build the build/index.html with minified css/js dependancies.

Each of the above task is performed by installing and loading the respective plugins. All gulp tasks are written in gulpfile.js and installed plugin details are stored as a dependancy in package.json.

Why to use gulp?

Gulp has various advantage over grunt such as:

• It uses pipeline streaming, so the speed and performance is high.
• Syntax is elegant and easy to understand.
• It wont generate the unnecessary .tmp files which are generated in grunt.
• Watch plugin is inbuilt so you don’t need to install and load the watch plugin manually.
• The line of coding involved is smaller and it is half to that of the number of lines written using grunt tasks.

Note: The only con with gulp is lack of worldwide community support and forums as it is new. But this will soon change as more developers starting to use gulp and contributing towards gulp. Hope you find support and forums for gulp soon.

How to write tasks in gulp?

To use gulp, you should have gulp installed in your system. To install gulp, you need to have installed node on your system. Do check out the installation procedure on my post over here. After installation follow the below steps.

You have to write all the gulp tasks inside a file called gulpfile.js . So create a file named gulpfile.js and start writing gulp tasks over there. For every gulp task, you need to mention

• The source files for the task.
• The required task to perform.
• The required destination file path.

Let me show you a sample gulpfile.js with jshint, watch and uglify tasks.

var gulp =  require('gulp'); // load gulp to write tasks
var jshint = require('gulp-jshint'); // load jshint
var concat = require('gulp-concat'); // load contact
var uglify = require('gulp-uglify'); // load uglify

// Sample task to uglify the js files
gulp.task('minify_task', function() {
    gulp.src('./app/js/*.js') // here we are selecting all js files under 'app/js' folder
            .pipe(jshint())
            .pipe(jshint.reporter('default'))
            .pipe(concat()) // after 'jshint' has run we are calling contact
            .pipe(uglify()) // similarly after concatenating all js files we are calling 'uglify'
            .pipe(gulp.dest('build/js')); // finally once these taks are done we push the result in to one 'build.js' file
});

// A watch task to check if any changes for js files
gulp.task('watch', function() {
    gulp.watch('app/js/*.js', ['minify_task']); // once a change is fount we are triggering 'uglify' task
});

// A default task which runs when u just hit 'gulp'
gulp.task('default', ['minify_task', 'watch']); // here we are running two task 'minify_task' task and 'watch'

1. Include gulp module to run gulp task using require(‘gulp’).
2. Include the required plugins with a corresponding object name.
3. Create any gulp task with suitable name, say in the above gulpfile.js I have given the task named ‘minify_task’. This pipes all script files in app/js folder to the jshint (task) object, which is useful to outputs the errors to the console. It is followed by concat(task) object which concats all js files. The output of the concatenated files are uglified using uglify(task) object. The resultant uglified files are moved to build/js with the corresponding source file name.
4. On command terminal when you type ‘gulp minify_task‘ , it will load gulpfile.js and run the corresponding ‘minify_task’ task.
5. If you type just  ‘gulp‘, the task mentioned inside default will run. Whatever task you want to run as default you can mention inside the default task. Here I just mentioned ‘minify_task’ and ‘watch’ tasks inside default task.
6. What Watch task will do is it keeps on watching whether any changes are made in the source files(In the above code I mentioned all files inside app/js folder as source files), If any changes made inside any of the source file, it triggers the corresponding task given inside the watch function.

Hope this post helped to know what is gulp? Why should we use gulp? and how to write gulp tasks?. If I miss anything above, share in comments!

Subscribe, Like and Share

The post Introduction to Gulp.js with example appeared first on Techie Dreams.