less variables in different files with gulp

Question

I'm working on a gulp task about compressing less and minify css, the only point it's troublesome is that I need some hardcoded 3 different variables in the 3 different environments(local, dev, prod) with 3 files.less. I swap the right version of right environment each time after deleting it (the original file). And in the main.less file I include the original.less file.

(Mi english and explication skills doesn't bright)

gulp.task('before-less', function(cb) {
    if(gutil.env.dev === true) {
        gutil.log('     preprod environment \n');  gulp.src('path/to/dev.less').pipe(rename('original.less')).pipe(gulp.dest('path/to/css'));
    } else if (gutil.env.prod === true) {
        gutil.log('     prod environment \n');
        gulp.src('path/to/prod.less').pipe(rename('original.less')).pipe(gulp.dest('path/to/css'));   
    } else {
        gutil.log('     local environment \n');
        gulp.src('path/to/local.less').pipe(rename('original.less')).pipe(gulp.dest('path/to/css'));
    }
});

gulp.task('less', ['before-less'], function() {
    gutil.log(' LESSing ');

    gulp.src(rute + 'css/*.less')
        .pipe(less({
            paths: [path.join(__dirname, 'less', 'includes')]
        })).on('error', gutil.log)
        .pipe(minifycss()) // Minify
        .pipe(gulp.dest(rute + 'css'))
        // .pipe(notify({message : "Modifications LESS" }))
        .pipe(connect.reload());
});

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?

I include my gulp task for someone have a better organization about this "problem"

score 2 · Accepted Answer · answered Feb 11 '15 at 23:50

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.

Thanks for gulp-subtasks it should solve the problem... I fix it with [runSequence](https://www.npmjs.com/package/run-sequence) — davesnx, Feb 12 '15 at 10:02

score 0 · Answer 2 · answered Feb 12 '15 at 10:26

I find the solution with runSequence gulp package.

Because I find that Gulp can work synchronously and mi second task less begins after mi first task before-less and they fail and gives me an Error.

With runSequence I can do something like that:

  var runSequence = require('run-sequence');

  gulp.task('default', function(callback) {
    runSequence('before-less', ['less'], callback);
  });

source

finding more information about gulp synchronously this could be really good other option and more 'elegant node' (using callbacks).

less variables in different files with gulp

2 Answers2