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

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

はじめに

この記事はGulp.js（全俺） Advent Calendar 2014です。

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

gulp-sassについて

gulp-sassはSassのGulpプラグインです。gulp-sassはnode-sassを使っています。代わりにgulp-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を用意します。

$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）を処理します。最後に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について紹介します。

シリーズ

最近構築したWordpressサイトで使っている便利なプラグイン30選

2015-02-02
Wordpress, wp-cli

WordpressでMarkdownとSyntaxHighlighter

2015-01-19
Wordpress, markdown

VCCWでファイルがアップロードできなくてはまった話

2015-01-16
Wordpress, VCCW

WP-CLIでWordpressプラグインをインストールし有効化する

2014-12-02
Wordpress, VCCW, wp-cli, bash

これからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる

2014-12-01
Wordpress, bundler, rbenv, nodebrew, Gulp

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