Introduction to Gulp

Now that we have seen a module bundler, let's see what Gulp will do for us. Gulp is a build tool for compiling and compressing JS/assets, and it does live reload on the browsers. Gulp file is basically a file with the set of instructions, which Gulp should do. The file can have a default task or several other tasks to be called from one another.

Installing Gulp and creating Gulp file

Let's install gulp and configure it with our existing application:

npm install -g gulp (for globally installing gulp)
npm install gulp –save-dev (as a developer dependancy)

Next, create a simple gulpfile.js file at the root of your app directory:

var gulp = require('gulp');

gulp.task('default', function() {
  // tasks goes here
});

Let's execute the command from terminal:

A console screenshot, after the gulp command is executed

Then, we are installing some other packages for Gulp-related tasks. We are adding these in our package.json file and running npm install, in order to install these:

Package...