Node.jsでのsassのコンパイル方法をいくつか記事にしようということで、今回はgulp.jsを使ったsassのコンパイル方法です。前回はnode-sassを使ったシンプルな方法でしたが、今回はgup.jsというタスクランナーを使用してsassをコンパイルします。
gulp.jsは様々な作業を自動化できるタスクランナー
gulpについてはいまさら書く必要がないくらい情報が多く出ているので軽く触れる程度にします。gulpはタスクランナーで、gulpを使うことでワークフローを自動化することができます。gulpを使うためにはまずはgulp自体をnpmでインストールするするところから始めます。
最近では昔ほどgulpgulp聞かなくなりましたが。私は今でも静的サイト構築に利用してます。一度使い始めるともう自動化されていない環境には戻れなくなってしまいますね。
npmでgulpをインストールする
yarnをお使いの方は適宜yarnのコマンドに変更してください。
npm install gulp --save-dev
touch gulpfile.js
gulpfile.jsはgulpの設定ファイルで、gulpfile.jsにタスク処理を記述します。
gulpでsassを扱うためのパッケージをインストールする
gulpのためのsassプラグインであるgulp-sassをnpmでインストールします。
npm install gulp-sass --save-dev
gulp-sassをインストールしてgulpでsassをコンパイルする準備が整いましたので、gulpfile.jsにsassをコンパイルするための処理を記述していきます。
gulpfile.jsにタスク処理を記述
gulpのtaskメソッドを使ってタスクを登録していきます。gulpとgulp-sassを使うため読み込んでおいてください。
// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');
gulp.task('sass', () => {
return gulp.src('./src/scss/style.css')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/css'));
});
上記でgulpのtaskメソッドでsassというタスクを登録しました。taskメソッドは第一引数にタスクの名前、第二引数に実行する関数を渡します。
第二引数の関数内部では、対象のscssファイルをgulp-sassによってコンパイルし、cssファイルを書き出しています。
対象のファイルはgulpのsrcメソッドで、書き出すディレクトリはgulpのdestメソッドで指定しています。
上記の一連の処理の流れをpipeメソッドを使って次へ次へと渡していくことで簡潔に処理をめとめることができます。
gulpコマンドでタスクを実行する
登録したタスクはgulpコマンドで実行します。先ほど作成したsassタスクを実行するときは
gulp sass
でsassタスクの処理が走ります。グローバルにgulpをインストールしていない場合はnpm scriptにコマンドを設定しておきます。
// packege.json ...中略
"scripts": {
"sass": "gulp sass"
},gulpのタスクを自動化する
タスクの作成と実行はできましたが、まだ自動化はできていません。gulpでタスクを自動化するためにはgulpのwatchメソッドを使います。gulpfile.jsに自動化用のタスクを追記します。
// gulpfile.js
gulp.task('sass:watch', () => {
gulp.watch('./src/scss/*.scss', ['sass']);
});
自動化するためのタスクを追加しました。タスクを作成するとことは先ほどと同じですが、関数内部でgulpのwatchメソッドを使っています。
watchメソッドは第一引数に監視するファイル、第二引数に実行するタスクの名前を設定します。上記の例では./src/scss内のscssファイルが更新された時にsassタスクが走ります。
監視するファイルや実行するタスクは複数設定可能です。
sass:watchタスクもsassタスクと同じgulpコマンドで実行します。
// packege.json ...中略
"scripts": {
"sass": "gulp sass",
"sass:watch": "gulp sass:watch"
},タスク名をdefaultにするとgulpコマンド省略可能
taskメソッドの第一引数をdefaultとするとgulpのデフォルトのタスク設定となりgulpコマンドのタスク名を省略できます。
様々なプラグインと組み合わせできる
今回はsass用のプラグインの使い方だけの紹介でしたが、gulpにはプラグインが多く用意されており様々な作業をまとめて自動化することができます。
例えば私は静的なサイトをコーディングするときにgulpでejsとscssを使って効率化しています。sassのコンパイルに関しても自動でベンダープレフィックスを付与したりなど拡張も可能です。gulpはまだまだ利用価値がありますので、状況に応じて使っていきたいと思っています。
