ファイル更新の度にgulpコマンドを実行するのが面倒くさい！
gulpを使っているとファイル更新の度にgulpコマンドを打つのが面倒になってきます。
そんな時はgulp.watchを使ってみましょう！
gulp.watchがファイルの更新を監視して、実行したい処理を代わりに行ってくれます。
gulpって何？という人はこちらから見てくださいね。
今回作成するサンプル
今回はgulp.watchでsassファイルの更新を監視して、ファイルが更新されたら自動でコンパイルしてくれるタスクを作ってみます。
色々なタスクに応用できるので、これを覚えておくととても便利だと思います。
フォルダの準備
今回作成するサンプルのフォルダ構成は以下になります。
gulp-watch-test/src/sass/style.scssを監視して、変更があればgulp-watch-test/dist/cssへ出力します。
フォルダ構成
gulp-watch-test/
├ dist/
│ └ css/
├ src/
│ └ sass/
│ └ style.scss
└ gulpfile.js
style.scssの作成
内容は適当でOKです。
|
1 2 3 4 |
$divWidth: 570px; div { width:$divWidth; } |
gulp-sassのインストール
まずはgulp-sassをインストールします。
毎度お馴染みのnpmコマンドを実行しましょう
|
1 |
npm install --dev-save gulp-watch |
gulp.watchのタスク作成
gulpfile.jsにタスクを作成していきます。
作成したタスクは以下の順で実行されます。
- defaultでgulp.watch用のタスクを実行します。
- gulp.watch用のタスクで、sassファイルを監視します。
- sassファイルに変更があるとsassコンパイル用のタスクを実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
let gulp = require('gulp'); let sass = require('gulp-sass'); gulp.task('sass', function () { return gulp.src('src/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('dist/css')); }); gulp.task('sass:watch', function() { gulp.watch('src/sass/*.scss', ['sass']); }); gulp.task('default', ['sass:watch']); |
defaultタスク
gulp.watch用のタスクを実行します。
sass:watchタスク
gulp.watchを実行します。
第1引数で監視対象ファイルを指定します。今回はsrc/sass/*.scssですね。
第2引数で監視対象ファイルが変更されたら実行されるタスクを指定します。今回はsassというタスクを実行させます。
sassタスク
src/sass/*.scssをファイルをgulp-sassでコンパイルしてdist/cssへ出力します。
gulpの実行
早速gulpを実行してみましょう！
|
1 |
gulp |
ファイルの確認
gulp-watch-test/dist/cssにstyle.cssが出来ていればまずは成功です。
こんな感じになっているはずです。
|
1 2 |
div { width: 570px; } |
ファイルの更新
ここからが本番ですね。
style.scssを更新してみましょう。
ファイルを保存した瞬間にコンパイルされ、style.cssが更新されていれば大成功です！
こんな感じで更新します。
|
1 2 3 4 5 |
$divWidth: 600px; div { width:$divWidth; height:500px; } |
更新結果
ではstyle.cssを確認してみましょう。
以下のように更新されていればOKです。
|
1 2 3 |
div { width: 600px; height: 500px; } |
これでgulp.watchでファイルの更新を監視して自動コンパイルしてくれるタスクの出来上がりです。
gulp.watchは便利なので、是非色々なタスクに使ってみてくださいね。
