gulpでSassをビルドする

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

gulp

CONTENTS

1 nodebrewのインストール
2 Gulpのインストール
- 2.1 グローバルインストール
- 2.2 ローカルインストール
3 Sassをビルドするための設定
- 3.1 ビルドスタイルの指定
4 Sassをビルドする
5 ベンダープレフィックスを自動でつける
- 5.1 gulpfile.js**を編集する
6 ソースマップを作成する
- 6.1 gulpfile.js**を編集する
7 cssを圧縮する
- 7.1 gulpfile.js**を編集する
- 7.2 関連

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

$ 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

1	$ npm install gulp-cli -global

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

$ npm init -y

1	$ npm init -y

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

ローカルインストール

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

$ npm install gulp --save-dev

1	$ npm install gulp --save-dev

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

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

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

$ npm install gulp-sass --save-dev

1	$ 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をデフォルトタスクに指定

//パッケージ変数にする。

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

$ gulp

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

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

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

$ npm install gulp-autoprefixer --save-dev

1	$ 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']);

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

1	$ 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']);

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

1	$ 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']);

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']);

nodebrewのインストール

Gulpのインストール

グローバルインストール

ローカルインストール

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

ビルドスタイルの指定

Sassをビルドする

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

gulpfile.js**を編集する

ソースマップを作成する

gulpfile.js**を編集する

cssを圧縮する

gulpfile.js**を編集する

関連