gulpでSassをビルドする

gulp（ガルプ）はNode.jsをベースとしたタスクランナーです。
gulpを使えばさまざまな作業を自動化することができます。gulpの一番の特徴はファイルの処理をストリーミングできるところ。
現在、Sassのビルドにgulpを使うのが主流であると言っても良いですね。

gulp

nodebrewのインストール

RubyやPythonのようにプロジェクトやお試しで、Node.jsのバージョンを切り替えることがあるのでNode.jsのバージョン管理(切り替え)ができるnodebrewを導入します。
※macOS 用パッケージマネージャー「Homebrew」がインストールされている前提。

$ brew install nodebrew

#nodebrewセットアップ
$ nodebrew setup

#環境変数の反映
$ source .bash_profile

#安定版のインストール
$ nodebrew install-binary stable

#インストール後の確認
$ nodebrew list

#使用するnode設定
$ nodebrew use stable

#npmの更新
$ npm update -global npm

Gulpのインストール

Node.jsではnpmによってパッケージのインストールを行います。gulpもnpmでインストールすることになります。

npmでパッケージをインストールする際にGlobal、Localのどちらにインストールするかを選びます。Globalにインストールしたパッケージはインストールしたマシンのどこからでもそのパッケージを使用することができます。
Localにインストールしたパッケージはインストールしたディレクトリ以下からのみ使用できます。

---

グローバルインストール

gulpはGlobal、Localの両方にインストールして使用します。ローカルインストールしたGulpを実行するためにはグローバルの Gulpが必要です。

$ npm install gulp-cli -global

続いてnpmの設定を保存するpackage.jsonを生成しておきます。

$ npm init -y

package.jsonがあれば複数人で開発する際に登録された（後述）パッケージが自動でインストールされます。

---

ローカルインストール

次にgulpパッケージのローカルインストールしましょう。
 –save-dev オプションを付けてインストールするとpackage.jsonに開発用のパッケージとしてインストール情報を保存するオプションで、package.json内のdependenciesという項目にgulpの情報が追加されます。

$ npm install gulp --save-dev

これでタスクランナーgulpの準備は整いました。

Sassをビルドするための設定

まずはgulpでSassをビルドするためのパッケージgulp-sassパッケージをローカルインストール。

$ npm install gulp-sass --save-dev

gulpfile.jsをルートディレクトリに設置する。gulpfile.jsはgulpに実行させるタスクを管理するファイルです。

//パッケージ変数にする。
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){  //Gulp実行時のタスク
  gulp.src('./sass/**/*.scss') //対象のディレクトリ
  .pipe(sass({outputStyle: 'expanded'}))  //ビルドスタイルの指定
  .pipe(gulp.dest('./css'));  //ビルド先の指定
});

gulp.task('watch', function(){
  gulp.watch('./sass/**/*.scss', ['sass']); //第一引数に監視したいファイルのパス、第二引数に実行したいタスク名
})

gulp.task('default',['watch']); //watchをデフォルトタスクに指定

ビルドスタイルの指定

gulpfile.jsの7行目で指定できるビルドスタイルは以下の通り。

• nested → Sassファイルのネストを引き継いで出力
• expanded → {} で改行して出力
• compact → セレクタと属性を1行にまとめて出力
• compressed → すべてを1行にまとめて出力

Sassをビルドする

gulpfile.jsのデフォルトタスクに「watch」を指定したのでターミナルからgulpを実行するだけで.scssファイルの監視が始まります。

$ gulp

実行後、対象ファイルの変更を監視して、保存の度に.scssファイルをビルドしてくれます。

ベンダープレフィックスを自動でつける

対象となるブラウザ毎にベンダープレフィックスを書き分けるなんてことはgulpに任せてしまいましょう。
書き出したcssにgulp-autoprefixerを使って、自動でベンダープレフィックスを付与。
gulp-autoprefixerパッケージをローカルインストール。

$ npm install gulp-autoprefixer --save-dev

gulpfile.js**を編集する

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

gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(autoprefixer({
    browsers: ['last 2 versions'],  //最後の2バージョンのブラウザを対象
    cascade: false
  }))
  .pipe(gulp.dest('./css'));
});

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

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

Autoprefixerの対象ブラウザについてはこちらの記事が非常に参考になります。
Autoprefixerの対象ブラウザって、どうやって選べばいいの？

ソースマップを作成する

ブラウザのデベロッパーツールでデバッグする時にとても便利なソースマップ。
sassファイルとCSSファイルをマッピングして、コンパイル前のどの部分が該当するか分かるようになります。
gulp-sourcemapsパッケージをローカルインストール。

$ npm install gulp-sourcemaps --save-dev

gulpfile.js**を編集する

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

gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
  .pipe(sourcemaps.init())  //呼び出し・初期化
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(autoprefixer({
    browsers: ['last 2 versions'],
    cascade: false
  }))
  .pipe(sourcemaps.write('./maps')) //ソースマップの書き出し先を指定
  .pipe(gulp.dest('./css'));
});

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

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

cssを圧縮する

さらにcssファイルの圧縮もgulpのタスクに組み込んでしまいましょう。
gulp-cssminパッケージをローカルインストール。

$ npm install gulp-cssmin --save-dev

gulpfile.js**を編集する

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps   = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');

gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(autoprefixer({
    browsers: ['last 4 versions'],
    cascade: false
  }))
  .pipe(sourcemaps.write('./maps'))
  .pipe(cssmin())
  .pipe(gulp.dest('./css'))
});

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

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