Compiling less files with Gulpjs

Gulp is a nodejs library useful to automatize workflows, in this post We will see how to use it to compile bootstrap less files.

Project Structure

Inside test folder we have an index.html file that imports bootstrap css from public/css/bootstrap.css. bootstrap-3.3.2/less directory contains less files that we have to compile in order to generate css file:

    test/
    ├── bootstrap-3.3.2
    │   ├── dist
    │   ├── fonts
    │   ├── js
    │   ├── less
    │   │   ├── bootstrap.less
    │   │   ├── mixins.less
    └── index.html
    └── gulpfile.js
    └── public
        └── css

Our Goal

What We want to do is to load test/bootstrap-3.3.2/less/bootstrap.less and generate public/css/bootstrap.css . We want to do it automatically, so every time that We modify some .less file inside test/bootstrap-3.3.2/less/ css file will be regenerated.

Libraries Installation

    npm install less
    npm install gulp
    npm install gulp-less
    npm install gulp-sourcemaps
    npm install  gulp-watch

Gulp file

Inside test folder, We will create a file named gulpfile.js:

    var gulp = require('gulp');

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

Compiling less

    var gulp = require('gulp'),
        less = require('gulp-less'),
        path = require('path'),
        sourcemaps = require('gulp-sourcemaps'),
        less_paths = {};

    // paths where less files are allocated

    less_paths = [
            __dirname + '/bootstrap-3.3.2/less/bootstrap.less'
        ]

    gulp.task('default', ['less:static']);


    gulp.task('less:static', function () {
        return gulp.src(less_paths)
            .pipe(sourcemaps.init())
            .pipe(less())
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(__dirname + '/public/css'));

    });

Now You can compile less and generate static css executing command gulp inside test directory. Gulp will search gulpfile.js and it will execute tasks defined as default.

Detecting changes and re compiling automatically

We can create another task that will watch for changes on the less files, so if You change any less file, gulp will regenerate css automatically. To do that We will add another funciton to gulpfile.js

    gulp.task('check', function() {
        gulp.watch(watch_paths, ['less:static']);
    });

gulpfile.js can be found at this link. Many tanks to my friend Raúl who helped me with this post.

References

  • Gulp's documentation Less Framework Gulp less Building with gulp