在 Elixir 中循环使用 Stylus 命令答案

【问题标题】：Loop a Stylus command in Elixir在 Elixir 中循环使用 Stylus 命令
【发布时间】：2015-07-09 16:53:12
【问题描述】：

我的网站有可切换的主题和颜色，我需要 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 命令，而不仅仅是最后一个？
如何将结果合并到一个文件中，而不是一个文件夹中的两个单独文件？

【问题讨论】：

如果要在目录中包含多个文件，请使用*.extension。
但我的想法是我需要将多个文件发送到多个目的地。包括在 main.styl 句柄中获取所有其他文件，但我需要的是 for-inside-a-for 的每次迭代生成自己的目标文件。

标签： javascript gulp stylus laravel-elixir

【解决方案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);
});

【讨论】：

【解决方案2】：

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

“对我来说，它看起来应该运行。我测试了循环，我知道它可以很好地通过每个主题颜色组合。” - 如果您在调用之外测试循环到elixir，你能输入console.log，看看你运行任务时会触发什么吗？

【讨论】：