Gulp Less Not Handling Includes Properly, Included Variables Not Defined

I am using less and Grunt, and am moving to gulp. My less works. When I run: lessc public/less/myapp.less I get working output with no errors. All my less, including includes, is

Solution 1:

The difference was what I was compiling:

• When I ran lessc myapp.less, I was compiling the main less file and it's dependencies
• When I ran gulp using the gulpfile above, I was compiling each less file individually, because gulp.src was *.less not myapp.less. Since these less files are only ever loaded from the main less file, they didn't have @imports for the things they depend on (because myapp.less depends on them). Eg, there's no point importing, say, 'theme.less' in every individual file rather than just importing it first in myapp.less.

Here's the working version:

// Run 'gulp' to do the important stuff
var gulp = require('gulp');
var prefixer = require('gulp-autoprefixer');
var less = require('gulp-less');
var path = require('path');

gulp.task('less', function () {
  gulp
    .src('./public/less/myapp.less') // This was the line that needed fixing
    .pipe(less({
      paths: ['public/less']
    }))
    .pipe(prefixer('last 2 versions', 'ie 9'))
    .pipe(gulp.dest('./public/css'));
});

// The default task (called when you run `gulp`)
gulp.task('default', function() {
  gulp.run('less');

  // Watch files and run tasks if they change
  gulp.watch('./public/less/*.less', function(event) {
    gulp.run('less');
  });
});

Edit: see @noducks answer below for an improved version that works with the latest gulp.

Solution 2:

Noticed a couple of gulp.run deprecation warnings were popping up there. This fixes them, and adds some error handling. I have a slightly different directory structure.

    'use strict';

    var gulp = require('gulp');
    var prefixer = require('gulp-autoprefixer');
    var less = require('gulp-less');
    var gutil = require('gulp-util');
    var plumber = require('gulp-plumber');

    gulp.task('less', function() {
        gulp
            .src('./less/app.less')
        .pipe(plumber(function(error) {
            gutil.log(gutil.colors.red(error.message));
            gutil.beep();
            this.emit('end');
        }))
        .pipe(less())
        .pipe(prefixer('last 2 versions', 'ie 9'))
        .pipe(gulp.dest('./css'));
    });

    gulp.task('less:watch', function(){
        gulp.watch(['./less/*.less', './less/module/*.less'], ['less']);
    });

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

Solution 3:

Here is my working version, using gulp-watch and gulp-connect for live reload.

gulp.task('less:dev', function () {
    gulp
      .src('app/styles/**/*.less', {read: false})
      .pipe(watch(function () {
        return gulp
          .src('app/styles/main.less')
          .pipe(less())
          .pipe(gulp.dest('app/styles/'))
          .pipe(connect.reload());  
    }));
});

Solution 4:

Another cause might be that you're using @import (inline) in your main.less, which will cause the imported file to not be processed.

See http://lesscss.org/features/#import-options