When I build the project, I want Gulp to generate multiple css files, one for each theme I want to expose to the user. (How the user changes the theme and how we maintain the theme across postbacks is a different topic.)
I have the following gulp.js file, and I'll show you its relevant parts:
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());
});
});
On devRoot, I have the main sass folder, who has immediate subfolders whose names are the themes. Each of those theme folders has a style.scss (as well as other .scss files) from which compass will start processing.
When I run gulp compass
, indeed, the new theme_style.css files are created. However, they all have exactly the same CSS content. I thought that I'm telling compass to read from distinct theme directories.
The problem could be that of concurrency. Virtually, the "subtasks" are run at the same time. By the time each subtask reaches right before .pipe(rename(theme + "_style.css"))
, compass already wrote a style.css (beyond my control), from which each theme's .pipe(rename(theme + "_style.css"))
will "copy and save-as", which ends up being multiple files that have the same exact CSS content.
How do I get compass NOT to already write a style.css? Or better yet, how do I tell compass the file name of the final .css I want so that it creates theme_style.css in the first place? This way I will not need to use the rename plugin (which looks to me like multiple save-as from the same exact file).
Another possible thing I could do is to ensure that each of those subtasks must happen one after another, but how do you achieve that? I want to maintain dynamic subtasks so all I need to do is add theme names to the array.