改良版・gulp-compassで色んな階層のsassをwatch
以前、gulp-compassで色んな階層のsassをwatchする方法を書きましたが、あの書き方だとconfig.rbが使えないっていう欠点がありました。
全てcompassデフォルトの設定でいくならいいけど、変えたい時だっていくらでもあるので、書き方を考えてみました。
※相変わらずgulp初心者のため、他にスマートな方法が存在しているかも。
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のプロジェクトルートに置く想定です。
要点としては、
- path.dirname(dir.path)で、現在のフォルダの親フォルダのパスを取得
- path.relative('./', parent)で、gulpのプロジェクトルートフォルダから見た、上記1のフォルダの相対パスを取得
- path.relative(parent, './')で、上記1のフォルダから見た、gulpのプロジェクトルートフォルダの相対パスを取得
scssを取得するときは、gulpのプロジェクトのルートから見たパスが必要なので、上記2のパスを使うんだけど、
compassのconfig_fileの設定は各下層フォルダから見たconfig.rbまでのパスが必要なので(今回の場合はgulpのプロジェクトルート)上記3のパスを使う。
compassのprojectは上記1のフォルダに。
もしもconfig.rbの場所を別の場所に移動したい場合は、そのように書いてあげたらOKだと思います。