0

当我构建项目时，我希望 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 内容。我以为我是在告诉指南针从不同的主题目录中读取。

问题可能是并发问题。实际上，“子任务”是同时运行的。当每个子任务到达之前.pipe(rename(theme + "_style.css"))，罗盘已经编写了一个 style.css（超出我的控制），每个主题.pipe(rename(theme + "_style.css"))都将从中“复制并另存为”，最终成为具有相同确切 CSS 内容的多个文件。

如何让指南针不再编写 style.css？或者更好的是，我如何告诉 compass 我想要的最终 .css 的文件名，以便它首先创建 theme_style.css？这样我就不需要使用重命名插件（在我看来，它就像来自同一个文件的多个另存为）。

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

4

0 回答 0