the mocuLog

gulpでSassをビルドする

By Leave a Comment

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

gulp

nodebrewのインストール

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$ 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が必要らしい。

1
$ npm install gulp-cli -global

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

1
$ npm init -y

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

ローカルインストール

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

1
$ npm install gulp --save-dev

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

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

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

1
$ npm install gulp-sass --save-dev

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//パッケージ変数にする。
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ファイルの監視が始まる。

1
$ gulp

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

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

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

1
$ npm install gulp-autoprefixer --save-dev

gulpfile.js**を編集する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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パッケージをローカルインストール。

1
$ npm install gulp-sourcemaps --save-dev

gulpfile.js**を編集する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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パッケージをローカルインストール。

1
$ npm install gulp-cssmin --save-dev

gulpfile.js**を編集する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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']);