タスクランナー

タスクランナーはコンパイルやテストなどの一連の手続きを自動化するツールです。「タスクランナー」と呼ばれなくともこのような特性を持つツールは数多あるのですが、フロントエンドで使用されるツールの多くはこの名称が使われています。

gulpとは

タスクランナーの一つです。gulpは主にビルドをタスクとして取り扱うため、ビルドシステムヘルパーとも呼ばれます。

gulpを使ってSassをコンパイルする

前回の記事でもgulpを使ったSassのコンパイルについて触れましたが、
今回はgulpのビルド手続きを記述するためのglupfile.jsにフォーカスを当ててみます。

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

gulp.task('sass', function() {
  return gulp.src('./*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css'));
});

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

上記コードは

gulp sassコマンドによるコンパイルSass
コンパイル済みCSSに元Sassファイルの変更を反映するための監視

をサポートするものです。

モジュール読み込み部分

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

1,2行目ではモジュール読み込みを行っています。
package.jsonで指定したパッケージをモジュールとして読み込むことができます。

タスク定義部分

gulp.task('sass', function() {
  return gulp.src('./*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css'));
});

gulp.taskで実行するタスクを定義できます。
定義したタスク名をgulpコマンドの引数に指定・実行することで、定義したタスク内容が実行されます。上記の例ではsassをタスク名としているので、gulp sassで実行可能です。

gulp.src('./*.scss')

入力とするファイルを指定します。
ここではgulpfile.jsと同階層にある任意のscssファイルを指定しています。

 .pipe(sass({outputStyle: 'expanded'}))

gulp.srcの返戻オブジェクトに対して、pipeメソッドで更に処理を追加しています。
sassモジュールを使い、入力scssファイルのコンパイル処理を行っています。引数には出力形式を指定しています。引数outputStyleは次の4通りで指定できます。

nested:scssのネスト構造を出力CSSにも残します。
expanded:ルールセットがブロックごと・宣言ごとに改行されます。
compact:ルールセットごとに改行されます。
compressed:改行されません。すべてワンライナーで記述されます。

特別な理由がない限り、比較的可読性の高いexpandedで良いと思います。

Sassファイル監視処理

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

二つ目のgulp.taskではSassファイルの監視タスクsass:watchを定義しています。
gulp.watchメソッドで、第一引数に指定したファイルに変化があった場合に第二引数に指定したタスクを実行します。今回はgulpfile.jsと同ディレクトリのscssファイルに変化があった場合にもsassタスクが実行されるようになっています。

sass:watchによる監視は自動では実行されません。
sassタスク同様に、gulpコマンドで実行する必要があります。

$ gulp sass:watch

実験

まずはSassの手動コンパイルをしてみます。

test.scss

#test{
    width: 300px;
    height: 500px;
    p {
        em {
            color: #ff00ff;
        }
    }
}

をgulpfile.jsと同じディレクトリに用意し、

$ gulp sass

を実行。するとcss/test.cssが生成されます。

#test {
  width: 300px;
  height: 500px;
}

#test p em {
  color: #ff00ff;
}

次に、test.scssを監視するためのタスクsass:watchを実行します。
このタスクは一度実行するとプロセスがキルされるまで終了しません。

$ gulp sass:watch
[21:40:42] Using gulpfile ~/hoge/gulpfile.js
[21:40:42] Starting 'sass:watch'...
[21:40:42] Finished 'sass:watch' after 11 ms

試しにtest.sassのセレクタ#test p emのcolor属性を変更しました。

#test{
    width: 300px;
    height: 500px;
    p {
        em {
            color: #0000ff;
        }
    }
}

するとsass:watchのタスクを実行するプロセスからの標準出力が表示されます。

...
[21:41:01] Starting 'sass'...
[21:41:01] Finished 'sass' after 50 ms
[21:41:11] Starting 'sass'...
[21:41:11] Finished 'sass' after 10 ms

CSSファイルにSassファイルの更新結果が反映されました。

#test {
  width: 300px;
  height: 500px;
}

#test p em {
  color: #0000ff;
}

まとめ

これでSassコンパイルの簡単な自動化ができました。
あとはgulpをCronで自動実行するなりCIで回すなりできますね。

参考文献

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Ren's blog

@rennnosuke_rk 技術ブログです

【Sass】gulpでSassのコンパイルを自動化する