Czy Gulp może zmienić zmienne LESS?

Question

Szukam przełączania trybu IE8 w moich plikach LESS i zautomatyzowania generowania plików w Gulp.

To gdzie ja zatrzymał się co do przekazania haustem mniej (minus kilka rzeczy):

var IE = true; 

var LESSConfig = { 
     plugins: [ ... ], 
     paths: LESSpath, 
     ie8compat: IE, //may as well toggle this 
     // Set in variables.less, @ie:false; - used in mixin & CSS guards 
     // many variations tried 
     // globalVars: [ { "ie":IE } ], 
     modifyVars:{ "ie":IE } 
    }; 

... 

.pipe(less (LESSConfig)) 

Czy nie zmienna modyfikacja obsługiwana w Gulp?

Chciałbym uniknąć używania gulp-modify et al jeśli mogę. Chciałbym, aby system budowania był dość abstrakcyjny z plików źródłowych.

Answer 1

modifyVars pracuje dla mnie teraz:

... 

    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); 
    }); 

Answer 2

ponieważ nie mogłem dostać to do pracy z gulp-less i stało się dla mnie oczywiste, że stosowanie globalVars i modifyVars są zarówno łamane, I wymyślił inne rozwiązanie.

Możesz użyć gulp-append-prepend, aby zapisać zmienne w pliku przed przetworzeniem go przez gulp-less. Nieco mniej elegancki, ale z drugiej strony działa.

coś takiego:

gulp.src('main.less') 
    .pipe(gap.prependText('@some-global-var: "foo";')) 
    .pipe(gap.appendText('@some-modify-var: "bar";')) 
    .pipe(less()) 
    .pipe(gulp.dest('./dest/'));