我的网站有可切换的主题和颜色,并且我需要 Elixir/Gulp 将所有可能的主题颜色组合渲染为 CSS 文件。这是我的 gulpfile.js
:
var gulp = require('gulp'),
notify = require('gulp-notify'),
elixir = require('laravel-elixir'),
stylus = require('laravel-elixir-stylus'),
watch = require('gulp-watch');
var themes = [
"alpha",
"beta"
];
var colors = [
"blue",
"red",
"green"
];
if(elixir.config.babel)
elixir.config.babel.enabled = false;
elixir(function(mix) {
for(ti = 0; ti < themes.length; ++ti) {
for(ci = 0; ci < colors.length; ++ci) {
mix.stylus([
'colors/'+colors[ci]+'.styl',
'themes/'+themes[ti]+'/main.styl'
], "public/css/"+themes[ti]+"."+colors[ci]+".css");
}
}
});
对我来说,看起来应该运行。我测试了循环,我知道它可以很好地遍历每个主题颜色组合。
但是,当我运行它时,它会创建一个文件夹 beta.green.css
,其中有两个文件,main.styl
和 green。风格
。
- 如何使其生成所有 Stylus 命令,而不仅仅是最后一个命令?
- 如何将结果合并到一个文件中,而不是文件夹中的两个单独文件?
最佳答案
最终完全放弃了 Elixir,只用纯粹的 Gulp 来实现;
gulp.task('styles', function(cb){
async.each(themes, function(theme, done) {
async.each(colors, function(color, next) {
gulp
.src([
'./resources/assets/stylus/colors/'+color+'.styl',
'./resources/assets/stylus/themes/'+theme+'/main.styl'
])
.pipe(stylus())
.pipe(concat(theme+"."+color+'.css'))
.pipe(gulp.dest('./public/css'))
.on("end", next);
}, done);
}, cb);
});
关于javascript - 在 Elixir 中循环 Stylus 命令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31323751/