Gulp Less Not Handling Includes Properly, Included Variables Not Defined

Gulp less not handling includes properly, included variables not defined

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.

Can Gulp change LESS variables?

modifyVars is working for me now:

    ...

    var LESSConfig = {
        paths: paths.LESSImportPaths,
        plugins: [
            LESSGroupMediaQueries,
            LESSautoprefix
        ],
        modifyVars: {
            ie: 'false'
        }
    };

    var LESSConfigIE = {
        paths: paths.LESSImportPaths,
        modifyVars: {
            ie: 'true'
        }
    };

    function processLESS (src, IE, dest){
       return gulp.src(src)
         .pipe( $.if( IE, $.less( LESSConfigIE ), $.less( LESSConfig ) ) )
         .pipe( $.if( IE, $.rename(function(path) { path.basename += "-ie"; }) ) )
         .pipe( gulp.dest(dest) )
    }

    // build base.css files
    gulp.task('base', function() {
         return  processLESS( paths.Base + '/*.less', false, paths.dest );
    });

     // build base-ie.css files for IE
     gulp.task('baseIE', function() {
         return  processLESS( paths.Base + '/*.less', true, paths.dest );
     });

Gulp watch and compile less files with @import

Right now you are opening the single gulp.src file, and watching After you open the file with gulp.
The following will split the watching and src into two tasks, allowing for separate file and src watching.

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var prefix = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = require('path');

gulp.task('less', function() {
    return gulp.src('./style.less')  // only compile the entry file
        .pipe(plumber())
        .pipe(less({
          paths: ['./', './overrides/']
        }))
        .pipe(prefix("last 8 version", "> 1%", "ie 8", "ie 7"), {cascade:true})
        .pipe(gulp.dest('./'))
        .pipe(livereload());
});
gulp.task('watch', function() {
    gulp.watch('./*.less', ['less']);  // Watch all the .less files, then run the less task
});

gulp.task('default', ['watch']); // Default will run the 'entry' watch task

When Any of the files found with *.less are altered it will then run the task which will compile just the src file.
The @imports should be 'included' correctly, if not check the import settings.

gulp-less doesn't make CSS files anymore

gulp-filter uses multimatch to match file paths against globbing patterns. The documentation for multimatch has this to say about *:

* matches any number of characters, but not /

Since you're trying to match files with paths like public/less/foo.less (which contain a /) using a single asterisk * doesn't work. You have to use two asterisks **:

gulp.task('build-less', function() {
  const fileFilter = filter(['**/*', '!**/mixins.less', '!**/variables.less']);
  gulp.src('./public/less/*.less') // path to less file
    .pipe(fileFilter)
    .pipe(plumber())
    .pipe(less())
    .pipe(gulp.dest('./public/css/')); // path to css directory
});

less variables in different files with gulp

I think you should considersubtasks or complete different tasks for your different situations.

The task of less I think that runs correctly, but the question is when
the gulp less include my file of original.less they should be read the
var first or they include it first and later read the var?

Less uses lazy loading and last declaration wins for variables, see also http://lesscss.org/features/#variables-feature-lazy-loading. The preceding means that if you declare the same variable again after your include it will override the variable everywhere in your code.

Using gulp to compile bootstrap.less files into main bootstrap.css?

I had the same issues trying to compile the Bootstrap CSS. My simplified solution ended up looking like:

// Compiles LESS > CSS 
gulp.task('build-less', function(){
    return gulp.src('styles.less')
        .pipe(less())
        .pipe(gulp.dest('./source/css'));
});

and my styles.less file included the import to the bootstrap.less. I noticed that if the bootstrap less files were included in the gulp.src() path it would errors.

My styles.less:

@import "../lib/bootstrap/less/bootstrap.less";
@body-bg:     red; // test background color

---

Related Topics