Grunt使いこなしてないけど、GulpでCompass入れてみた

前の記事で導入してみたので、今度は使ってみます。
まずは手始めに、これがないと死ぬと私に言わしめるCompassを導入してみました。

glup-compass

公式ページは下記。

www.npmjs.com

インストール

とりあえずCompass本体が必要なので、入れてなかったらインストール。
インストール方法はこの記事で触れてる。

公式ドキュメントにならって下記コマンドを実行。

$ npm install gulp-compass --save-dev

プロジェクト内のnode_modulesに「gulp-compass」が追加されて、package.jsonにgulp-compassの記述が追加される。
これでインストール完了。

基本的な使い方

gulpfile.jsに下記みたいな感じに記述。

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

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

gulp compassコマンドを実行。

$ gulp compass
[16:14:01] Using gulpfile ~/（gulpfile.jsのパス）/gulpfile.js
[16:14:01] Starting 'compass'...
[16:14:01] Finished 'compass' after 9.07 ms

指定したフォルダにcssが出力される。
細かい設定とかは公式のドキュメントを参考に。

変更を監視する

ファイルを保存する度にコマンドを実行するのは面倒なので、常に監視しておいてほしいときは、watchメソッドを使う。

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

これでgulp watchコマンドを実行すると、「sass」フォルダ内の拡張子が「.scss」のものが変更されたら自動でcompassを実行してくれる。
が、これだけだとシンタックスエラーが出た時にwatchごと止まってしまって面倒なので、公式ドキュメントにも記載されている「gulp-plumber」を使ってみる。

gulp-plumber

いくら紹介されたからとはいえ、このプラグインのこと何も知らないのに入れるのは...っていう感じなので、軽く調べる。

www.npmjs.com

英語は苦手なので曖昧だけど、pipeの途中でエラーが出たとき処理が途中で止まっちゃうのを防ぐ専門のプラグインの模様。
下記のコマンドでインストール。

$ npm install --save-dev gulp-plumber

gulpfile.jsのcompassのタスクを下記のように修正。

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

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

これでエラーが出ても止まらなくなる。

色々いじってみてわかったこと

• ファイルのパスはgruntfile.jsの位置から見た相対パス。
• 便利なプラグインが大量に出ているので、やりたいことがあったらとりあえず漁る。
• こういったタスクランナーを動かすために、それ相応なサイトのディレクトリ構造にする必要がありそう。これまで通りはちょっとキツイ。