我希望在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 等。我希望保持构建系统与源文件相当抽象。
答案 0 :(得分:2)
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 );
});
答案 1 :(得分: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/'));
答案 2 :(得分:1)
现在(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'))
})