March 23, 2015 · Front-end Gulp LESS

Building with Gulp (1) - Compile LESS, watch changes and minify CSS

This is my first try using Gulp, and its been fun.

What is Gulp?

Gulp is a build system, something that you really need in development process. It helps you do a lots of things that make your development process easier and much more effective. Gulp is similar to Grunt but takes different approach on defining the tasks.

You can check Gulp's Getting Started page for the brief introduction and how to install gulp.

The plugins

After you ready with gulp, next things to do is installing plugins. There's a bunch of plugins registered in the gulp plugins page, or you can simply use google to find it. In this occasion, lets try plugins that we can use for development with LESS.

gulp-less, to compile LESS

gulp-less is a plugin for processing LESS file to CSS. First, install the plugin.

$ npm install gulp-less --save-dev

Then, add them to your gulpfile.js

var gulp       = require('gulp');  
var less       = require('gulp-less');

gulp.task('default', function() {  
  gulp.src('./assets/src/main.less')
    .pipe(less())
    .pipe(gulp.dest('./assets/dist/'));
});

To run this, just do:

$ gulp

This means, it will compile ./assets/src/main.less file to main.css and put it inside ./assets/dist/ folder.

gulp-watch, to watch the changes

It's tedious to run this manually on each changes, so let's make it automatic. We want gulp to watch all less file, so every changes that being made, the gulp will automatically compile it to css.

$ npm install gulp-watch --save-dev

..and update the gulpfile.js

var gulp       = require('gulp');  
var less       = require('gulp-less');  
var watch      = require('gulp-watch');

/* Task to compile less */
gulp.task('compile-less', function() {  
  gulp.src('./assets/src/main.less')
    .pipe(less())
    .pipe(gulp.dest('./assets/dist/'));
});

/* Task to watch less changes */
gulp.task('watch-less', function() {  
  gulp.watch('./assets/src/**/*.less' , ['compile-less']);
});

/* Task when running `gulp` from terminal */
gulp.task('default', ['compile-less', 'watch-less']);  

Since we have 2 tasks that we need to run, we need to modified the task structure. We rename the previously default task to compile-less, and add new default taks that contains collection of tasks that we want to run when we run gulp command in terminal.

The gulp command now will compile and watch any changes that happen for any .less file inside ./assets/src/ folder and run the compile-less task automatically when it happen.

gulp-minify-css, to minify CSS

Finally, we need to minify the CSS for production. Other than gulp-minify-css, we will use 2 additional plugins, gulp-rename, to rename the output file and gulp-header, to add comment header in the output file.

Lets install the additional plugins.

$ npm install gulp-minify-css gulp-rename gulp-header --save-dev

..and update our gulpfile.js

var gulp       = require('gulp');  
var less       = require('gulp-less');  
var watch      = require('gulp-watch');  
var minifyCSS  = require('gulp-minify-css');  
var rename     = require('gulp-rename');  
var header     = require('gulp-header');  
var pkg        = require('./package.json');

/* Prepare banner text */
var banner = ['/**',  
  ' * <%= pkg.name %> v<%= pkg.version %>',
  ' * <%= pkg.description %>',
  ' * <%= pkg.author.name %> <<%= pkg.author.email %>>',
  ' */',
  ''].join('\n');

/* Task to compile less */
gulp.task('compile-less', function() {  
  gulp.src('./assets/src/main.less')
    .pipe(less())
    .pipe(header(banner, {pkg: pkg}))
    .pipe(gulp.dest('./assets/dist/'));
});

/* Task to watch less changes */
gulp.task('watch-less', function() {  
  gulp.watch('./assets/src/**/*.less' , ['compile-less']);
});

/* Task to minify css */
gulp.task('minify-css', function() {  
  gulp.src('./assets/dist/main.css')
    .pipe(minifyCSS())
    .pipe(header(banner, {pkg: pkg}))
    .pipe(rename('main.min.css'))
    .pipe(gulp.dest( './assets/dist/' ));
});

/* Task when running `gulp` from terminal */
gulp.task('default', ['compile-less', 'watch-less']);

/* Task when running `gulp build` from terminal */
gulp.task('build', ['minify-css']);  

To build the css, we need to run:

$ gulp build

It will minify the css output and put it in main.min.css. We also add a banner text on the top of main.css and main.min.css files. We take the banner details from package.json.

There you go, we finished the gulpfile.js that we can use for daily development with LESS and build it for production.

You can check this code on github.

Comments powered by Disqus