Categories

Task automation with Gulp.js

Posted on: January 13, 2016 by Dimitar Ivanov

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.

See also
References
Share this post

Have questions about task automation with gulp.js? Leave a comment below with your thoughts and don't forget to share this blog post.


1 Comment

Chandresh Kesri
Chandresh Kesri July 3, 2016 at 04:05 am
Excellent for Front End developers or Web Designers who is working with Gulp, SCSS, JS, Uglyfy, minify, livereload etc etc.

Leave a comment

Captcha