Search code examples
lessgulpgulp-less

less variables in different files with gulp


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"


Solution

  • 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.