はじめに
こんにちは！
テンダ仙台支店webデザイナーのYHです。
前回はGulpでscssコンパイルが行えるようになりました。
今回はより便利なGulpの設定をするお話です。
watchでファイルの変更を監視
前回までの状態だとsassコンパイルを行う際、その都度コマンドを入力する必要がありました。
複数のタスクを設定している場合、今のままでもそこそこ便利ではあります。
しかし、watchメソッドを使うとファイルを上書き保存する度にコンパイルを実行してくれるようになり、より効率的に作業を進められます。
なおwatchはgulpに標準で含まれるメソッドなのでインストールの必要はありません。
前回設定したgulpfile.jsの13～15行目を以下のように変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var gulp = require("gulp"); var sass = require('gulp-sass'); //sass gulp.task("sass", function () { gulp.src( 'dev/scss/*.scss' ) .pipe(gulp.dest('pub/css')); }); //ファイルの監視 gulp.task('watch', function () { gulp.watch('app/dev/scss/*.scss', ['sass']); }); |
今回はscssコンパイルですが、もちろん設定したタスク全てに適用できます。
watchを止めない
かっこよく言うとエラーハンドリングというやつです。
Gulpはscssコンパイルなどでエラーを見つけると、処理を中断します。
watchメソッドでタスクを自動化していると、自然と目線はエディタとブラウザを往復することになるので、エラーでGulpが停止したことに気付かないこともしばしばあります。
止まったGulpを再び動かすまでには「エラーで止まる→構文を修正→gulpを再起動→コンパイル」のような手順を踏む必要があり、これをエラーごとに繰り返すのは面倒です。
なのでこれを無視するプラグインをインストールします。
プラグインのインストールはnpmを使用します。
|
1 |
npm install --save-dev gulp-plumber |
インストールが完了したら、gulpfile.jsへ追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var gulp = require("gulp"); var sass = require('gulp-sass'); var plumber = require('gulp-plumber'); //sass gulp.task("sass", function () { gulp.src( 'dev/scss/*.scss' ) .pipe(plumber()) .pipe(gulp.dest('pub/css')); }); //ファイルの監視 gulp.task('watch', function () { gulp.watch('app/dev/scss/*.scss', ['sass']); }); |
3行目はエラーハンドリングのためのプラグイン読み込み、10行目でタスクに追記しています。
これでエラーでGulpが止まることがなくなります。
次回は最終回です。
実際のweb制作でGulpを使って気づいたことなどを書きたいと思います。
他の記事
第1回「web制作が便利に！Gulpを知った気になれる記事」
第5回「Gulpを導入してみよう！その3」