Gulp quick start tutorial

Gulp is a toolkit to automate tasks primarily in web development workflow. It can automate things like css/js minification, concatenation, etc. Here is quick tutorial to get started with gulp.

Javascript files used for this tutorial

Create these two files in proj1/src folder.

function f1(testVariable1) {
  console.log(testVariable1);
}

function f2(testVariable2) {
  console.log(testVariable2);
}

$ mkdir proj1; cd proj1
$ mkdir src
// And create file1.js and file2.js in src folder.

Gulp local installation

1. Initialize npm project (select project name as proj1) and create package.json.

   $ cd proj1
   $ npm init
   ...
   About to write to /home/user1/tmp/proj1/package.json:
   {
     "name": "proj1",
     "version": "1.0.0",
     "description": "",
     "main": "gulpfile.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",
     "license": "ISC"
   }
   Is this ok? (yes) y
   

   Now look at the content of package.json

   $ cat package.json 
   {
     "name": "proj1",
     "version": "1.0.0",
     "description": "",
     "main": "gulpfile.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",
     "license": "ISC"
   }
   

2. Install gulp, gulp-contact, gulp-uglify, gulp-clean locally

   $ sudo npm install gulp --save-dev
   $ sudo npm install gulp-concat --save-dev
   $ sudo npm install gulp-uglify --save-dev
   $ sudo npm install gulp-clean --save-dev
   

   This will install packages in node_modules directory and update package.json to add gulp, gulp-contact, gulp-uglify, gulp-clean in devDependencies.

   $ cat package.json 
   {
     "name": "proj1",
     "version": "1.0.0",
     "description": "",
     "main": "gulpfile.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",
     "license": "ISC",
     "devDependencies": {
       "gulp": "^3.9.0",
       "gulp-clean": "^0.3.1",
       "gulp-concat": "^2.6.0",
       "gulp-uglify": "^1.5.1"
     }
   }
   

Gulp basic javascript concatenation task

1. Create basic gulp build file (gulpfile.js) with basic javascript files concatenation.
   

   var gulp = require('gulp');
   var concat = require('gulp-concat');
   
   gulp.task('scripts', function() {
     return gulp.src('./js/*.js')
       .pipe(concat('all.js'))
       .pipe(gulp.dest('./dest/'));
   });

2. Run gulp task scripts and look the content of dest/all.js

   $ gulp scripts
   Using gulpfile ~/tmp/proj1/gulpfile.js
   [18:44:56] Starting 'scripts'...
   [18:44:56] Finished 'scripts' after 30 ms
   $ cat dest/all.js
   function f1(testVariable1) {
     console.log(testVariable1);
   }
   
   function f2(testVariable2) {
     console.log(testVariable2);
   }
   

Gulp task with uglify

1. Update gulp task to add uglify
   

   var gulp = require('gulp');
   var concat = require('gulp-concat');
   var uglify = require('gulp-uglify');
   
   gulp.task('scripts', function() {
     return gulp.src('./js/*.js')
       .pipe(uglify())
       .pipe(concat('all.js'))
       .pipe(gulp.dest('./dest/'));
   });

2. Now run gulp again and look at the content of all.js again. This time it should be in compressed form.

   $ gulp scripts
   $ cat dest/all.js
   function f1(o){console.log(o)}
   function f2(o){console.log(o)}
   

Gulp with clean task

1. Change gulpfile.js to add clean-scripts task and also add it as dependency in scripts task.
   

   var gulp = require('gulp');
   var concat = require('gulp-concat');
   var uglify = require('gulp-uglify');
   var clean = require('gulp-clean');
   
   gulp.task('clean-scripts', function () {
     return gulp.src('./dest/*.js', {read: false})
       .pipe(clean());
   });
   
   gulp.task('scripts', ['clean-scripts'], function() {
     return gulp.src('./js/*.js')
       .pipe(uglify())
       .pipe(concat('all.js'))
       .pipe(gulp.dest('./dest/'));
   });

2. Now you can either run clean-scripts directly or run scripts task and it will run clean-scripts automatically.

   $ gulp clean-script
   Using gulpfile ~/tmp/proj1/gulpfile.js
   Starting 'clean-scripts'...
   Finished 'clean-scripts' after 24 ms
   $ gulp scripts
   Using gulpfile ~/tmp/proj1/gulpfile.js
   Starting 'clean-scripts'...
   Finished 'clean-scripts' after 16 ms
   Starting 'scripts'...
   Finished 'scripts' after 48 ms
   

Additional notes

1. In case you need to install gulp packages globally you can use -g as shown below:

   $ sudo npm install -g gulp
   $ sudo npm install -g gulp-concat
   ... and so on
   

2. In case you need to install or update gulp packages if you have package.json, you can use

   $ npm install
   $ npm update
   

   This can be useful in automating setting up build environment.