Question

当我构建项目时，我希望Gulp生成多个css文件，每个文件对应一个我要向用户公开的主题。（用户如何更改主题以及我们如何跨回发维护主题是另一个主题。）

我有以下gulp.js文件，我将向您展示其相关部分：

var gulp = require("gulp"),
    compass = require("gulp-compass"),
    rename = require("gulp-rename");

var devRoot = "app/";
var deployRoot = "wwwroot/";

gulp.task("compass", function () {

    var themes = ["default", "fusion", "alliant", "forte"];

    themes.map(function (theme) {
        gulp.src(devRoot + "sass/" + theme + "/style.scss")
        .pipe(compass({
            css: deployRoot,
            sass: devRoot + "sass/" + theme + "/"                
        }))
        .pipe(rename(theme + "_style.css"))
        .pipe(gulp.dest(deployRoot))
        .pipe(connect.reload());
    });
});

在devRoot上，我有一个主sass文件夹，它有直接的子文件夹，其名称是主题。每个主题文件夹都有一个style.scss（以及其他.scss文件），罗盘将从中开始处理。

当我运行gulp compass时，确实会创建新的theme_style.css文件。但是，它们都具有完全相同的CSS内容。我以为我告诉指南针从不同的主题目录中读取。

问题可能是并发问题。事实上，＆＃34;子任务＆＃34;同时运行。当每个子任务到达.pipe(rename(theme + "_style.css"))之前时，指南针已经写了一个style.css（超出我的控制范围），每个主题的.pipe(rename(theme + "_style.css"))将＆＃34;复制并保存为＆＃34;，最终是具有相同CSS内容的多个文件。

如何让罗盘不要写一个style.css？或者更好的是，如何告诉罗盘我想要的最终.css的文件名，以便它首先创建theme_style.css？这样我就不需要使用重命名插件（它看起来像多个保存 - 来自同一个确切的文件）。

我可以做的另一件事是确保每个子任务必须一个接一个地发生，但是你如何实现呢？我想维护动态子任务，所以我需要做的就是为数组添加主题名称。

Gulp和Compass - 生成多个主题（单独的theme_style.css）文件？

0 个答案: