Gulp 可以更改 LESS 变量吗?
Can Gulp change LESS variables?
我希望在我的 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 et al。我想让构建系统从源文件中完全抽象出来。
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 );
});
因为我无法让它与 gulp-less
一起工作,而且对我来说很明显 globalVars
和 modifyVars
的应用程序都被破坏了,我想出了一个不同的解决方案。
您可以在 gulp-less
处理变量之前使用 gulp-append-prepend
将变量写入文件。有点不太优雅,但从好的方面来说,它确实有效。
像这样:
gulp.src('main.less')
.pipe(gap.prependText('@some-global-var: "foo";'))
.pipe(gap.appendText('@some-modify-var: "bar";'))
.pipe(less())
.pipe(gulp.dest('./dest/'));
现在(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'))
})
我希望在我的 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 et al。我想让构建系统从源文件中完全抽象出来。
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 );
});
因为我无法让它与 gulp-less
一起工作,而且对我来说很明显 globalVars
和 modifyVars
的应用程序都被破坏了,我想出了一个不同的解决方案。
您可以在 gulp-less
处理变量之前使用 gulp-append-prepend
将变量写入文件。有点不太优雅,但从好的方面来说,它确实有效。
像这样:
gulp.src('main.less')
.pipe(gap.prependText('@some-global-var: "foo";'))
.pipe(gap.appendText('@some-modify-var: "bar";'))
.pipe(less())
.pipe(gulp.dest('./dest/'));
现在(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'))
})