環境
- OS X Yosemite 10.10.3
前提
- Node.js v0.11.16
- npm 2.3.0
- Compass 1.0.3 (Polaris)
- Sass 3.4.10 (Selective Steve)
gulp をインストール
$ npm install --global gulp
$ npm install --save-dev gulp
gulp-compass をインストール
$ npm install gulp-compass --save-dev
compass create
いつものように Project ディレクトリとかを作って
$ mkdir SampleProject
$ cd SampleProject
$ compass create
config.rb を編集
とりあえずこんなかんじに
require 'compass/import-once/activate'
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
gulpfile.js を作成
$ vim gulpfile.js
中身をかんな感じに
各種パスはご自身の環境に合わせてください
var gulp = require('gulp');
var compass = require('gulp-compass');
gulp.task('compass',function(){
gulp.src('./sass/*.scss')
.pipe(compass({
config_file: './config.rb',
css:'./css',
sass:'./sass'
}));
});
gulp.task('watch',function(){
gulp.watch('./sass/*.scss',function(event){
gulp.run('compass');
});
});
gulp.task('default',function(){
gulp.run('watch');
});
実行
$ gulp
これでいつものように作業して勝手にコンパイルしてくれます。gulp もプラグインがガンガン増えて来ていることや、設定ファイルが Grunt よりも書きやすい、Grunt より高速(StreamAPIのおかげ?) ってことで今後も目が離せません。
gulpfile.js については詳しく触れませんが、じっくり読んでみるとある程度意味がわかるんじゃないかなぁと思います。
また、さっきも触れましたが沢山プラグインがあるので、良さげなプラグインがあればガンガン使ってみて試してみるのもいいかもです