Может ли Gulp изменить LESS переменные?

Question

Я хочу переключить режим IE8 в моих файлах LESS и автоматизировать генерацию файлов в Gulp.

Вот где я остановился на том, что передать без глотка (минус куча вещей):

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

Не поддерживается ли изменение переменных в Gulp?

Я хотел бы избежать использования gulp-modify et al, если смогу. Я хотел бы сохранить систему сборки достаточно абстрагированной от исходных файлов.

Answer 1

modifyVars работает для меня сейчас:

    ...

    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

Так как я не мог заставить это работать с gulp-lessи мне стало очевидно, что применение globalVars а также modifyVars оба сломаны, я придумал другое решение.

Ты можешь использовать gulp-append-prepend записать ваши переменные в файл, прежде чем gulp-less обрабатывает это. Немного менее элегантно, но, с другой стороны, это действительно работает.

Что-то вроде этого:

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

Answer 3

В настоящее время (2019) эта проблема, кажется, решена. Однако мне понадобилось еще много времени, чтобы запустить его. Вот что я сделал:

gulp.task('lessVariants', ['less'], function() {
    return gulp.src('less/styles.less', {base:'less/'})
        .pipe(less({modifyVars:{'@color1': '#535859'}))
        .pipe(less({modifyVars:{'@color2': '#ff0000'}))
        .pipe(less({modifyVars:{'@color3': '#ccffcc'}))
        .pipe(rename('styles.modified.css'))
        .pipe(cleanCSS())
        .pipe(gulp.dest(distFolder + 'css'))
})

Это не сработало. Была изменена только последняя переменная. Я изменил это следующим образом, чтобы заставить его работать:

gulp.task('lessVariants', ['less'], function() {
    return gulp.src('less/styles.less', {base:'less/'})
        .pipe(less({modifyVars: {
            '@color1': '#535859',
            '@color2': '#ff0000',
            '@color3': '#ccffcc',
        }}))
        .pipe(rename('styles.variant.css'))
        .pipe(cleanCSS())
        .pipe(gulp.dest(distFolder + 'css'))
})