GulpでSassのファイルをwatchし、コンパイルする

前回の記事で、Gulpのインストールまで出来ました。
今回はSassのファイルを監視し、変更されたらCSSにコンパイルするところまで書きます。

ディレクトリ構成

今回、以下の様なディレクトリ構成になっています

/
├― gulpfile.js
├― package.json
├― node_modules/
│   └ 諸々のモジュール郡
├― scss/
│   └ layout.scss
└― css

• gulpfile.js: gulpのタスクが記述されたファイル
• package.json: このプロジェクトで使用しているgulpの設定ファイル
• node_modules: gulpでインストールした諸々のファイル群
• scss: Sassファイル群
• css: コンパイルされたSassファイルの格納場所

使用するプラグイン

以下のプラグイン及びメソッドを利用します。

• Sassファイルのコンパイル: gulp-sass
• ファイルの監視: gulpのwatchメソッド
• watch時にエラーが出てもタスクが終了しないようにする: gulp-plumber

gulp-sassとgulp-plumberをインストールし、gulpfile.jsを編集する

プロジェクトのルートディレクトリに移動し、 「gulp-sass」と「gulp-plumber」をインストールします。

npm install gulp-sass --save-dev
npm install gulp-plumber --save-dev

インストールが完了したらgulpfile.jsにタスクを書き込んでいきます。

// インストールしたモジュールを読み込む
var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');

// タスクを登録していく
gulp.task('default', function() {
    // scss/内のsassファイルに変更があったらタスク「sass」を起動する
    gulp.watch('scss/*.scss', ['sass']);
});

gulp.task('sass', function() {
    // scss/内のsassファイルをコンパイルし、css/内に出力する
    gulp.src('scss/*.scss')
            // sassのコンパイルでエラーが出てもタスクを終了しないようにする 
            .pipe(plumber())
            .pipe(sass())
            .pipe(gulp.dest('css/'));
});

gulpを実行してみる

gulpfile.jsを保存したら、gulpを実行してみます。

gulp

gulpコマンドを実行するとまず、defaultタスクが実行されます。

[gulp] Using gulpfile ~/hoge/gulpfile.js
[gulp] Starting 'default'...
[gulp] Finished 'default' after 5.66 ms

defaultタスクが実行されているのを確認したら、scss/layout.scssを作成します。
例として、以下のようなファイルを作成しました。

$width: 1000px;

.test {
    margin: 0 auto;
    width: $width;
}

scss/layout.scssを保存します。
scss/内のファイルに変更が検知され、黒い画面上に以下のようなメッセージが出てきます。

[gulp] Starting 'sass'...
[gulp] Finished 'sass' after 7.9 ms

gulpfile.jsで定義したsassタスクが実行されました。
css/内にlayout.cssが出力されていればタスク成功です。

割と簡単にsassのコンパイルが出来ました。
gulpfile.jsの書き方もシンプルですが、黒い画面上のメッセージもシンプルでいいですね。