CODEWITHSUNDEEP
lessgulpgulp-less
davesnx
davesnx

Reputation: 384

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"

Upvotes: 2

Views: 896

Answers (2)

davesnx
davesnx

Reputation: 384

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

Upvotes: 0

Bass Jobsen
Bass Jobsen

Reputation: 49054

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.

Upvotes: 2

Related Questions