javascript - 在 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。风格。

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

Answer 1

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