Как собирать 2 шаблона из одних исходников при помощи gulp?

Question

[Denis Verbin]

Господа, прошу направить в нужное русло.

Есть

|themes
|-theme1
|--scss
|--css
|--js
| .html
|-theme2
|--scss
|--css
|--js
| .html

theme1 и theme2 различаются только цветами, 2 сайта с одной темой но в разных цветах.
В scss есть _theme-variables.scss с определением цветов.
Сейчас правки вносятся совсем колхозным методом, просто в css/html файлах и дублируются в оба шаблона, хочу привести это дело в порядок, вносить правки в один scss/html и собирать 2 разных шаблона с учетом _theme-variables.scss
Создать задачу сборки я конечно могу, но вот как настроить 2 задачи с разными _theme-variables.scss прошу подсказать.

Comments

[Froggyweb]

По идее должен отличаться только css если это не так то печалька. Надо больше информации. В самом печальном случае надо будет дублировать таски для использовать переменные в галпфайле для разброса по папкам.

[Denis Verbin]

Да, в идеале отличается только css, а если точнее только один файл с цветами.
Цель №1 - не править одно и то же в разных шаблонах
Цель №2 - научится собирать фронт :)

Мне собственно нужна зацепка, как в gulpfile создать таск примерно такого содержимого

source: "scss"
destinations {
	{
		dest1: "theme1";
		exclude-from-build: "scss/_theme2-colors.scss"
	}
	{
		dest2: "theme2";
		exclude-from-build "scss/_theme1-colors.scss"
	}

Прошу прощения за этот псевдокод, постарался коротко и наглядно обьяснить что мне нужно :)

[Denis Verbin]

Froggyweb, Собственно вопрос решен, если вдруг интересно - смотрите в ответы.

Answer 1

[Denis Verbin]

За несколько пар часов родилось решение методом проб и ошибок. Расскажу о своем решении, но увы, не уверен что оно кому нибудь пригодится, так как в процессе, оказалось что мой SASS сильно завязан на древнем compass, без него, кстати, решить задачу было бы еще проще.
Из софта используется compass, Gulp, gulp-compass
gulpfile.js

var gulp = require('gulp'),
	compass = require('gulp-compass');

gulp.task('compass', function() {
  gulp.src('sass/**/*.scss')
    .pipe(compass({
      config_file: './theme1.rb',
      css: 'theme1/css',
      sass: 'sass'
    }))
  gulp.src('sass/**/*.scss')
    .pipe(compass({
      config_file: './theme2.rb',
      css: 'theme2/css',
      sass: 'sass'
    }));
});

gulp.task('default',function() {
    gulp.watch('./sass/**/*.scss',['compass']);
});

Конфиги compass theme1.rb и theme2.rb
Разница только в том, что в первом к проекту подключается директория vars1, в которой находится _theme_variables.scss с цветами шаблона и определением других переменных SASS, а в theme2.rb директория vars2, с таким же файлом для второго шаблона.
theme1.rb

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "fonts"
add_import_path "vars1"

output_style = :expanded
environment = :development

line_comments = false
color_output = false
sourcemap = false

theme2.rb

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "fonts"
add_import_path "vars2"

output_style = :expanded
environment = :development

line_comments = false
color_output = false
sourcemap = false

Структура директорий такая

|-scss <- Исходники SASS за исключением файла _theme_variables.scss импортируемого во все scss файлы
|-theme1
|--css <- Собранный css с использованием _theme_variables.scss из vars1 директории
|-theme2
|--css <- Собранный css с использованием _theme_variables.scss из vars2 директории
|-vars1
|--_theme_variables.scss
|-vars2
|--_theme_variables.scss
|-gulpfile.js
|-theme1.rb
|-theme2.rb