kinalog

自称フロントエンドエンジニアが何か喚いています。

改良版・gulp-compassで色んな階層のsassをwatch

以前、gulp-compassで色んな階層のsassをwatchする方法を書きましたが、あの書き方だとconfig.rbが使えないっていう欠点がありました。
全てcompassデフォルトの設定でいくならいいけど、変えたい時だっていくらでもあるので、書き方を考えてみました。

※相変わらずgulp初心者のため、他にスマートな方法が存在しているかも。

使うプラグイン

以前と同じ。gulpとgulp-compass、gulp-plumberは入れてある前提で

path
gulp-foreach

gulpfile.js

var path = require('path');
var gulp = require('gulp');
var foreach = require('gulp-foreach');
var compass = require('gulp-compass');
var plumber = require('gulp-plumber');

gulp.task('compass-watch', function() {
    return gulp.src('src/**/_sass')
        .pipe(plumber())
        .pipe(foreach(function( stream, dir ) {
            var parent = path.dirname(dir.path);
            var relative_path = path.relative('./', parent);
            var base_path = path.relative(parent, './');

            return gulp.src(relative_path + '/_sass/**/' + '*.scss')
                .pipe(plumber())
                .pipe(compass({
                    config_file: base_path + '/config.rb',
                    project: parent,
                    sass: '_sass',
                    css: 'css',
                    image: 'img'
                }));
        }));
});

※config.rbはgulpのプロジェクトルートに置く想定です。

要点としては、

  1. path.dirname(dir.path)で、現在のフォルダの親フォルダのパスを取得
  2. path.relative('./', parent)で、gulpのプロジェクトルートフォルダから見た、上記1のフォルダの相対パスを取得
  3. path.relative(parent, './')で、上記1のフォルダから見た、gulpのプロジェクトルートフォルダの相対パスを取得

scssを取得するときは、gulpのプロジェクトのルートから見たパスが必要なので、上記2のパスを使うんだけど、
compassのconfig_fileの設定は各下層フォルダから見たconfig.rbまでのパスが必要なので(今回の場合はgulpのプロジェクトルート)上記3のパスを使う。
compassのprojectは上記1のフォルダに。

もしもconfig.rbの場所を別の場所に移動したい場合は、そのように書いてあげたらOKだと思います。