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

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

Answer 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并查看运行任务时会触发的内容吗？

在Elixir中循环使用Stylus命令

2 个答案: