在 Elixir 中循环 Stylus 命令

Question

我的网站有可切换的主题和颜色，我需要 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.styl。

如何让它生成所有 Stylus 命令，而不仅仅是最后一个？
如何将结果合并到一个文件中，而不是将两个单独的文件合并到一个文件夹中？

Answer 1

也许 laravel-elixir-stylus 不应该被调用多次？（或者，这可能是一个错误……如果您查看 end of the implementation，您可以看到任务正在以名称 stylus 排队，可能会相互覆盖）——所以只有最后一个排队（ beta + green) 被执行。
mix.stylus 的第二个参数是一个输出目录，如果您不想要单独的输出文件夹，只需传入 "public/css/" 而不是 "public/css/"+themes[ti]+"."+colors[ci]+".css"。

"对我来说，这看起来应该运行。我测试了循环，我知道它很好地遍历了每个主题颜色组合。" – 如果您在调用 elixir 之外测试了循环，您能否放入一个 console.log 并查看当您运行任务时触发了什么？

Answer 2

最终完全放弃了 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);
});

在 Elixir 中循环 Stylus 命令

Loop a Stylus command in Elixir

javascript

gulp

stylus

laravel-elixir