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.
gulp-tutorial

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.

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments