gulp-less

Gulp LESS Fails Silently – Add Some Logging

Click Here for TL;DR

Gulp LESS Nightmare (due to operator error)

I recently wrote a post about GulpJS and all of it’s awesomeness. Almost immediately following that post I spent several hours pulling my hair out because I couldn’t figure out why my Gulp LESS task wasn’t working. So I did the research and suffered through the misery so you don’t have to 😉

Let Me Set Up Our Environment For My Failing Gulp LESS Task Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var gulp     = require('gulp'),
    notify   = require('gulp-notify'),
    less     = require('gulp-less'),
    paths    = {
        less : ['app/less/*.less']
    };

gulp.task('less', function() {
    return gulp.src(paths.less)
        .pipe(less())
        .pipe(concat('master.css'))
        .pipe(gulp.dest('app/build/css'))
        .pipe(notify({ message: 'Finished LESS Gulp Tasks'}));
});

The task above is simple, we will set all files with the .less extension in folder app/less/ as the source for our task. gulp.src(paths.less)

Then we will compile each of those LESS files into CSS .pipe(less())

Now we will contactenate those new CSS files into one file called master.css. .pipe(concat('master.css'))

We declare the destination for that new master.css file. .pipe(gulp.dest('app/build/css'))

And finally send out a notification that the LESS task was done. .pipe(notify({ message: 'Finished LESS Gulp Tasks'})

The Problem:

Here is what we expect to see when we run our gulp less task.

1
2
3
4
5
$ gulp less
[10:33:30] Using gulpfile ~\Desktop\GitHub\master-app\gulpfile.js
[10:33:30] Starting 'less'...
[10:33:30] gulp-notify: [Gulp notification] Finished LESS Gulp Tasks
[10:33:30] Finished 'less' after 52 ms

BUT WAIT, here is what we actually see:

1
2
3
$ gulp less
[10:33:30] Using gulpfile ~\Desktop\GitHub\master-app\gulpfile.js
[10:33:30] Starting 'less'...

And that's it! No notification is printed and no master.css is found in our destination path.

Finding The Solution

The first mistake I made was looking for the problem in the wrong area. I assumed something was wrong in my gulpfile.js and proceeded to try writting my LESS gulp task out several different ways thinking that might work, but alas, nothing changed.

Eventually I stumbled upon my savior, gulp-util. If something is wrong inside of your LESS files, gulp will make no effort to alert you of this, it will simply fail silently.

By altering my gulpfile.js I was able to see some error logging. Below is the modified javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var gulp     = require('gulp'),
    notify   = require('gulp-notify'),
    less     = require('gulp-less'),
    util     = require('gulp-util'),
    paths    = {
        less : ['app/less/*.less']
    };

gulp.task('less', function() {
    return gulp.src(paths.less)
        .pipe(less().on('error', util.log))
        .pipe(concat('master.css'))
        .pipe(gulp.dest('app/build/css'))
        .pipe(notify({ message: 'Finished LESS Gulp Tasks'}));
});

Notice the .on('error', util.log) that was added. Now when I run my LESS gulp task I see the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$ gulp less
[10:49:52] Using gulpfile ~\Desktop\GitHub\master-app\gulpfile.js
[10:49:52] Starting 'less'...
[10:49:52] { [Error: variable @light-grey is undefined in file C:\Users\jcarter\Desktop\GitHub\master-app\app\less\directives.less line no. 61]
  type: 'Name',
  filename: 'C:\\Users\\jcarter\\Desktop\\GitHub\\master-app\\app\\less\\directives.less',
  index: 1017,
  line: 61,
  callLine: NaN,
  callExtract: undefined,
  column: 20,
  extract:
   [ '.dialog-box {',
     '  border: 1px solid @light-grey;',
     '  border-radius: 3px;' ],
  message: 'variable @light-grey is undefined in file C:\\Users\\jcarter\\Desktop\\GitHub\\master-app\\app\\less\\directives.less line no. 61',
  stack: undefined,
  lineNumber: 61,
  fileName: 'C:\\Users\\jcarter\\Desktop\\GitHub\\master-app\\app\\less\\directives.less',
  name: 'Error',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-less',
  __safety: { toString: [Function] } }

What's important to see above is message: 'variable @light-grey is undefined in file...

Finally the answer! As usual it is operator error, but now I know where that error is and I can fix it!

In The End

gulp-less will fail silently when compiling your code to CSS.

Installing gulp-util:

1
npm install gulp-util --save-dev

Will allow you to error log your LESS task and catch any errors inside your LESS files. Add this error logging to your less task:

1
.pipe(less().on('error', util.log))

Hope this helps!

Pro Tip: Lint your CSS and LESS in Gulp

While error logging with gulp-util is one way to catch error in your CSS and LESS during Gulp tasks, you can also use gulp-recess for linting!

Install:

1
$ npm install --save-dev gulp-recess

Usage:

1
2
3
4
5
6
7
8
9
var gulp = require('gulp');
var recess = require('gulp-recess');

gulp.task('default', function () {
    return gulp.src('src/app.css')
        .pipe(recess())
        .pipe(recess.reporter())
        .pipe(gulp.dest('dist'));
});

Leave a Reply

Your email address will not be published. Required fields are marked *