0

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

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

2 回答 2

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);
});
于 2015-07-17T12:47:26.223 回答
0
  1. 也许laravel-elixir-stylus不应该多次调用？（或者，这可能是一个错误……如果您查看实现的结尾，您会看到任务正在以 name 排队stylus，可能会相互覆盖）——因此只有排队的最后一个 ( beta+ green) 被执行。
  2. to 的第二个参数mix.stylus是一个输出目录，如果您不想要单独的输出文件夹，则传入"public/css/"而不是。"public/css/"+themes[ti]+"."+colors[ci]+".css"

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

于 2015-07-13T05:02:40.370 回答