Pocket

前回までで、gulpを使ってsassのコンパイルや、css、jsの圧縮などを行うタスクを作成しましたが、いちいちタスクを実行させなければいけないのは効率が良くないので、対象のファイルに変更があったら自動でタスクを実行させる設定を行いたいと思います。


今回作成したタスクでできることは、

  1. ・scssのコンパイル
  2. ・cssの圧縮とベンダープレフィックス付け
  3. ・jsの圧縮と結合
  4. ・ファイルの監視とタスクの自動実行

になります。

※Mac環境を前提とします。またnode.js、rubyはインストールしてあるものとして進めます。



watchのタスクを作成する

ファイルの変更の監視と、変更があった場合に指定のタスクを実行させるには、
gulpにもともとある機能のwatchを使います。(gulpをインストールしていれば追加で何かインストールする必要はありません。)


作成したwatchタスクは以下のようになります。

タスク名は、gulp wで監視を実行させたいため、’w’としました。
重要な部分は、4つのvarから始まる文です。

まず、一つ目の文は、gulp.watch()を使って、
「/src/scssディレクトリ内のいずれかのscssファイルに変更があったら、’sass’タスクを実行する」
という設定になります。’sass’タスクは以前作成したscssファイルをコンパイルするタスクです。

その他の3つ文もそれぞれgulp.watch()を使って、
gulp.watch(変更を監視するファイル, [‘実行したいタスク名’])
といったように一つずつ設定しています。



gulpで監視を実行する

gulpfile.jsを上記のように記述できたら、ターミナルよりgulp wをたたきます。

My-MacBook-Pro:work ユーザー名$ gulp w
[17:53:53] Using gulpfile ~/Sites/gulp_test/work/gulpfile.js
[17:53:53] Starting ‘w’…
[17:53:53] Finished ‘w’ after 18 ms

このような状態になったら、監視が開始されているので、試しにsrc/scss内のscssファイルに変更を加えて保存してみます。
保存後にターミナルを見てみると、

CSS File /Users/takuchan/Sites/gulp_test/work/src/scss/style.scss was changed, running task sass…
[18:15:07] Starting ‘sass’…
——— sass task ———-
[18:15:07] directory ./
[18:15:08] write ./style.css
[18:15:08] Finished ‘sass’ after 575 ms
CSS File /Users/takuchan/Sites/gulp_test/work/dst/css/style.css was changed, running task cssmin…
[18:15:08] Starting ‘cssmin’…
——— cssmin task ———-
[18:15:08] Finished ‘cssmin’ after 5.65 ms

と、実行されたタスクが表示されます。
この結果では、まず、’sass’タスクが行われ、src/scss/のstyle.scssがコンパイルされ、dst/css/にstyle.cssファイルが作成されます。
次に、dst/css/内のcssファイルに変更が発生(sassタスクによって)したので、’cssmin’タスクが実行され、dst/cssminに、dst/css/style.cssを圧縮したstyle.min.cssが作成されています。

このようにwatchタスクを実行していれば自動でタスクの実行を行ってくれるようになります。
また、watchタスクの中止は、control+cキー(Mac)で行えます。



まとめ

今回は、これまで作成したタスクを対象のファイルに変更があったら自動で実行するwatchタスクを作成しました。
ここまでできれば最低限のことはgulpで行えるようになっていますが、画像の圧縮など、まだまだ便利なプラグインがありますので、次回以降にご紹介できればと思います。


以上になります。



Pocket

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

Copyright © team naporitan All Rights Reserved.