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