Task automation with Gulp.js

WHAT IS GULP

Gulp is a streaming build system for development. It allows you to automate different tasks like CSS minification, javascript compression, less/sass compiling.

INSTALLING GULP

To install gulp as global package use the -g modifier.

npm install -g gulp

CREATING A PACKAGE.JSON

• automatic - next command will guide you through a bunch of questions and at the end will create a package.json file.

  npm init

• manual - create a file named package.json and save it in the project root folder.

  {
    "name": "your-project-name",
    "version": "1.0.0"
  }

CREATE A GULPFILE.JS

Create a gulpfile.js at the root of your project:

var gulp = require('gulp');

gulp.task('default', function() {
    // place code for your default task here
});

RUN GULP

To run the default task:

gulp

To run a specific task:

gulp minify

MINIFY CSS

To minify your styles use the gulp-minify-css plugin.

• Install Minify Css

  npm install gulp-minify-css --save-dev

• Append to gulpfile.js:

  var minyfyCss = require('gulp-minify-css');
   
  gulp.task('minify', function() {
      return gulp.src('src/css/*.css')
          .pipe(minyfyCss())
          .pipe(gulp.dest('assets/css'));
  });

COMPRESS JAVASCRIPT

To minify your scripts use the gulp-uglify plugin.

• Install UglifyJS

  npm install gulp-uglify --save-dev

• Amend the gulpfile.js:

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

COMPILE LESS

To compile your less files to css use the gulp-less plugin.

• Install Less for Gulp

  npm install gulp-less --save-dev

• Append to gulpfile.js:

  var less = require('gulp-less');
   
  gulp.task('less', function() {
      return gulp.src('src/less/*.less')
          .pipe(less())
          .pipe(gulp.dest('src/css'));
  });

FILE WATCHER

To watch for changes use the gulp-watch plugin.

• Install file watcher for Gulp

  npm install gulp-watch --save-dev

• How to use gulp watch

  var watch = require('gulp-watch');
  
  gulp.task('less', function() {
      return gulp.src('src/less/*.less')
          .pipe(watch('src/less/*.less'))
          .pipe(less())
          .pipe(gulp.dest('src/css'));
  });

FULL EXAMPLE

The final version of package.json:

{
  "name": "your-project-name",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-less": "^3.0.5",
    "gulp-minify-css": "^1.2.3",
    "gulp-uglify": "^1.5.1",
    "gulp-watch": "^4.3.5"
  }
}

The final version of gulpfile.js:

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var uglify = require('gulp-uglify');
var minifyCss = require('gulp-minify-css');

gulp.task('default', ['compress', 'minify', 'less'], function () {

});

gulp.task('less', function() {
    return gulp.src('src/less/*.less')
        .pipe(watch('src/less/*.less'))
        .pipe(less())
        .pipe(gulp.dest('src/css'));
});

gulp.task('minify', function() {
    return gulp.src('src/css/*.css')
        .pipe(watch('src/css/*.css'))
        .pipe(minifyCss())
        .pipe(gulp.dest('assets/css'));
});
 
gulp.task('compress', function() {
    return gulp.src('src/js/*.js')
        .pipe(watch('src/js/*.js'))
        .pipe(uglify())
        .pipe(gulp.dest('assets/js'));
});

CONCLUSION

Using a build system as Gulp can boost your performance with task automation as like as minify CSS, uglify javascript, compile LESS/SASS.