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