Gulp : Alternative of Grunt

What is Gulp?

Gulp is a workflow automation tool. Like grunt, it works using npm and the package.json file. All available plugins will also be downloaded using npm and added as devDependencies in the package.json file. 
One of the main differences with Gulp is that it uses streams. A stream is a set of functions through which a file will go and be modified in memory. The file will be written on the disk only at the end of the process so it is more efficient. Grunt tasks, on the other hand, work as silos and cannot be chained.
In short, Gulp is not a task runner, but a "build system helper".

How can I use it?

It uses a command-line interface (CLI) to run custom tasks defined in a file (known as a gulptfile). It is distributed via npm.

Step 1. Create the package.json file

Use npm to init the file:
npm init
Then you will see some questions [2]. After giving those answers you will see the format of package.json [3]. Type "yes" to confirm it [4].

Step 2. Install Gulp globally and locally

At first install Gulp globally.
npm install -g gulp
Then install it locally.
npm install gulp --save-dev
This will install the gulp command line and everything needed to run a gulp workflow.

 Note: Do not forget the –dev part for it to be specified as a devDependencie in the package.json file.

You then have to install gulp utils which contains common function shared by other plugins:
npm install gulp-util --save-dev

Step 3. Create the gulpfile.js

Here is a minimal gulpfile. It creates a default task that runs nothing.
  var gulp = require('gulp');
 var gutil = require('gulp-util');
 gulp.task("default", []);

Now run gulp command, you should see :

Step 4. Add your first task: JSHint

Now that your gulpfile is ready, the next step is to add a plugin and use it. All plugins can be found here: http://gulpjs.com/plugins/. One of the common tasks performed in a gulpfile is checking if the JavaScript syntax is correct. To do that, we usually use JSHint.

If you search for JSHint on the gulp plugins page, you will find gulp-jshint (here) which corresponds to what we need! In the project folder, run:
npm install jshint gulp-jshint --save-dev

Load the plugin

To load the plugin, use the require:
var jshint = require('gulp-jshint');

Configure the task

Add the following code in gulpfile.
 gulp.task('lint', function() {
  return gulp.src(['*.js', '!gulpfile.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
}); 

Specify as a default task

Add the following code in gulpfile.
 gulp.task("default", ['lint']);

Finally the gulpfile.js

 var gulp = require('gulp');
var gutil = require('gulp-util');
var jshint = require('gulp-jshint');

gulp.task('lint', function() {
  return gulp.src(['*.js', '!gulpfile.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

gulp.task("default", ['lint']);

You can run your task by using the following command line (where you specify the task name as a parameter for gulp):
gulp lint 

Step 5. Add your second task: Concatenation

If you want to concatenate multiple files, search for concat on the gulp plugins page, you will find gulp-concat (here). In the project folder, run:
npm install --save-dev gulp-concat

Load the plugin

To load the plugin:
var concat = require('gulp-concat');

Configure the task

Add the following code to concatenate all js file except gulpfile.
gulp.task('scripts', function() {
  return gulp.src(['*.js', '!gulpfile.js'])
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});

Finally the gulpfile.js

 var gulp = require('gulp');
var gutil = require('gulp-util');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');

gulp.task('lint', function() {
  return gulp.src(['*.js', '!gulpfile.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});
gulp.task('scripts', function() {
  return gulp.src(['*.js', '!gulpfile.js'])
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});

gulp.task("default", ['lint']);

You can run your task by using the following command line (where you specify the task name as a parameter for gulp):
gulp scripts
Now, you will see a new folder named dist. You will find all.js file inside this folder which is a concatenated version of all js files.

Step 6. Concatenate Minified/Compressed Files

If you want to minified multiple files, search for uglify on the gulp plugins page, you will find gulp-uglify (here). In the project folder, run:
npm install --save-dev gulp-uglify

Load the plugin

To load the plugin:
var uglify = require('gulp-uglify');

Configure the task

Add the following code to uglify all js file except gulpfile.
gulp.task('scripts', function() {
  return gulp.src(['*.js', '!gulpfile.js'])
    .pipe(concat('all.js'))
    .pipe(uglify())      // newly added line for uglifying
    .pipe(gulp.dest('./dist/'))
});

Finally the gulpfile.js

 var gulp = require('gulp');
var gutil = require('gulp-util');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('lint', function() {
  return gulp.src(['*.js', '!gulpfile.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});
gulp.task('scripts', function() {
  return gulp.src(['*.js', '!gulpfile.js'])
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/'))
});

gulp.task("default", ['lint']);

Then again run:
gulp scripts
Now, you will see a  minified version of all.js

Step 7. Use watch so you do not have to run Gulp manually

All your repetitive tasks are automated inside a gulp workflow. To do that, you can add a specific task named watch. This task will constantly inspect your working folder and, based on rules, when a file is modified, gulp will run an associated task. 

First, install watch in your project folder: 
npm install --save-dev gulp-watch

Load the plugin

Generally you don't need to load this plugin. But if you want to do so then write below code.
 var watch = require('gulp-watch');

Configure the task

The config part is a bit different here because you need to specify a configuration for each task you want to cover using watch.
gulp.task('watch', function() {
  gulp.watch(['*.js', '!gulpfile.js'], ['lint', 'scripts']);
});

Finally the gulpfile.js

 var gulp = require('gulp');
var gutil = require('gulp-util');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');

gulp.task('lint', function() {
  return gulp.src(['*.js', '!gulpfile.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});
gulp.task('scripts', function() {
  return gulp.src(['*.js', '!gulpfile.js'])
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/'))
});
gulp.task('watch', function() {
  gulp.watch(['*.js', '!gulpfile.js'], ['lint', 'scripts']);
});

gulp.task("default", ['lint']);

When you want to activate watch you only have to run the following command:
gulp watch
And it will execute tasks each time a file is changed and this file is in the scope of watched files for the specific task. 

References

Comments

Post a Comment

Popular posts from this blog

Grunt : The Task Runner

Image
What is Grunt? Grunt is a JavaScript task runner , a tool used to automatically perform frequently used tasks such as minification, compilation, unit testing, linting, etc. The basic principle for Grunt is to give us an easy way to run tasks . A task is a set of code files and configuration files already created for you. You can get new tasks by installing Grunt plugins that you will get using npm. How can I use it? It uses a command-line interface (CLI) to run custom tasks defined in a file (known as a Gruntfile). Grunt is written in Node.js. It is distributed via npm. Step 1. Create the package.json file Use npm to init the file: npm init Then you will see some questions [2]. After giving those answers you will see the format of package.json [3]. Type " yes " to confirm it [4]. Step 2. Install Grunt globally and locally At first install Grunt globally. npm install -g grunt Then install it locally. npm install grunt --save-dev Note: Do n...
Read more