これからはじめるGulp #2：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる

はじめに

前回のこれからはじめるGulp：bundler, rbenv, nodebrewでGulp環境を作ってみる #1でGulp自体を動かすことができたので今回はgulp-sassを使ってSCSSファイルをCSSにコンパイルするタスクを作ってみます。

gulp-sassについて

gulp-sassはSassのGulpプラグインです。gulp-sassはnode-sassを使っています。代わりにgulp-ruby-sassを使うことRuby版のSassを使うことができます。

ディレクトリとサンプルSCSS

先に必要なディレクトリとサンプル用のSCSSファイルを作っておきます。

src, destディレクトリを作る

ソースとなるSCSSファイルはsrcディレクトリに、コンパイル後のCSSはprod(dist)ディレクトリとします。これは一例なのでディレクトリ名は好みに合わせて作ってください。

$ mkdir src
$ mkdir src/scss
$ mkdir prod
$ mkdir prod/css

サンプル用SCSSファイル

作成したディレクトリにSCSSのサンプルファイルを作ります。

$ vi src/scss/style.scss

SCSSがしっかりコンパイルされているかチェックしたいので変数を使った簡単なSCSSを用意します。

style.scss

$color: #555;

body {
  background: $color;
}

gulp-sassのインストール

--save-devを付けてgulp-sassをインストールします。

$ sudo npm install gulp-sass --save-dev
Password:
-
> node-sass@0.9.6 install /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/node_modules/gulp-sass/node_modules/node-sass
> node build.js

`darwin-x64-v8-3.14` exists; testing

  ․․․․․․․․․․․․․․․․․․․․․․․․․․

  26 passing (43ms)

Binary is fine; exiting
gulp-sass@1.1.0 node_modules/gulp-sass
├── map-stream@0.1.0
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.40)
├── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, minimist@1.1.0, vinyl@0.4.5, chalk@0.5.1, through2@0.6.3, lodash.template@2.4.1, multipipe@0.1.2, dateformat@1.0.11, lodash@2.4.1)
└── node-sass@0.9.6 (get-stdin@3.0.2, object-assign@1.0.0, node-watch@0.3.4, node-sass-middleware@0.3.1, nan@1.3.0, shelljs@0.3.0, mkdirp@0.5.0, chalk@0.5.1, yargs@1.3.3, sinon@1.10.3, mocha@1.21.5)

タスクを作る

gulpfile.jsにsassのタスクを作ります。タスクの設定方法の詳細はAPIドキュメントを参考に。

モジュールを読み込む

require()を使ってgulp-sassモジュールを読み込みます。 Node.jsのモジュールについてはこちらを参照。

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

タスクを作る

gulp.task(name[, deps], fn)でタスクを作ります。

gulp.task('sass', function(){
  // stream
});

gulp.task()の関数内にSassの処理を書きます。処理はgulp.src(globs[, options])を使ってstreamをつくりpipe()でstreamから受け取ったファイルのパス名パターン（globs）を処理します。jQueryのメソッドチェーンみたいですね。最後にgulp.dest(path[, options])で宛先（保存先）を指定します。

gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss') //タスクで処理するソースの指定
    .pipe(sass()) //処理させるモジュールを指定
    .pipe(gulp.dest('./prod/css')); //保存先を指定
});

最後にdefaultのタスクでsassが処理されるよう指定します。

gulp.task('default', ['sass']);

すべて合わせるとこのようになります。

gulpfile.js

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

gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'));
});

gulp.task('default', ['sass']);

これを保存してコンパイルを実行する準備ができました。

SCSSをコンパイルする（gulp-sassの実行）

最後にgulp-sassを実行しコンパイルを試します。

$ gulp sass
[18:55:36] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[18:55:36] Starting 'sass'...
[18:55:36] Finished 'sass' after 5.19 ms

$ tree prod
prod
└── css
    └── style.css

prod/cssの中にstyle.cssが保存されていれば成功です。
これでSassのコンパイルまで行えたので今回はここまで。明日はファイルの変更を監視しタスクを実行するwatchについて紹介します。

この記事はこれからはじめるGulp：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる（2）の転載記事です。