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.