能否使用 Gulp 更改 LESS 变量？

Question

能否使用 Gulp 更改 LESS 变量？

5

我想在我的LESS文件中切换IE8模式，并在Gulp中自动化文件生成。

这是我在使用gulp-less时遇到的问题（减去了很多东西）：

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等插件。我希望将构建系统与源文件分离。

- Lance

3个回答

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/'));

- Okonomiyaki3000

我的 main.less 文件开头是 @import "variables.less" - 所以如果我添加任何内容，它将被覆盖。 - ESP32

@Gerfried 我已经有一段时间没有使用 Gulp 了，但是...你是在告诉我这个 bug 两年后还没有修复吗？希望我的解决方法不再需要了。好吧，如果这仍然是一个问题，也许你可以把 import 去掉，只使用 Gulp 来组合 variables.less 和 main.less，并在它们之间夹杂着任何额外的东西？ - Okonomiyaki3000

我认为现在它可以工作了 - 但我仍然遇到了一些问题（请看我的回答） - ESP32

2

现在（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'))
})

这种方法不起作用。只有最后一个变量被修改了。我按照下面的方式进行了更改，以使其正常工作：

原始答案： Original Answer

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

- ESP32

关于你的第二个片段：它不应该像这样吗？（即modifyVars可以/应该是一个常规的JS对象。虽然你写的方式仍然预期返回除了最后一个值之外的任何内容）。 - seven-phases-max

@seven-phases-max 你说得太对了 - 谢谢，我更新了我的示例代码。 - ESP32

1

有道理。说实话，看到第一个代码块时，我在想“为什么不把所有这些变量合并成一个对象呢？”我相信这样做稍微更有效率一些（尽管你可能不会注意到，除非你有数百个变量）。 - Okonomiyaki3000

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lance · Accepted Answer

现在我的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 );
     });