gulp をごっくんごくごく #compass 編

環境

• 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 については詳しく触れませんが、じっくり読んでみるとある程度意味がわかるんじゃないかなぁと思います。

また、さっきも触れましたが沢山プラグインがあるので、良さげなプラグインがあればガンガン使ってみて試してみるのもいいかもです