Kann Gulp LESS-Variablen ändern?

Question

Ich suche den IE8-Modus in meinen LESS-Dateien umzuschalten und die Dateigenerierung in Gulp zu automatisieren. Diese

ist, wo ich in dem, was gestoppt Schluck-less (minus ein paar Sachen) zu übergeben:

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

ist variabel Modifikation nicht in Gulp unterstützt?

Ich möchte vermeiden gulp-modify et al wenn ich kann. Ich möchte das Build-System einigermaßen von den Quelldateien abstrahieren.

Answer 1

modifyVars arbeitet für mich jetzt:

... 

    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

Da ich das nicht mit gulp-less arbeiten konnte und es wurde mir klar, dass die Anwendung von globalVars und modifyVars sind beide gebrochen, kam ich mit einem bis andere Lösung.

Sie können gulp-append-prepend verwenden, um Ihre Variablen in die Datei zu schreiben, bevor gulp-less verarbeitet wird. Ein wenig weniger elegant, aber auf der positiven Seite funktioniert es tatsächlich.

Etwas wie folgt aus:

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