続いて、読み込み時間の最適化のよくある手法の1つJavaScriptの圧縮を自動化します。https://www.npmjs.org/package/gulp-uglifyサンプルとしてjsディレクトリにindex.jsを作成します。});})();続いてgulpfile.jsにタスクを追加します。.pipe(gulp.dest("./js/min"));});では実行してみましょう。jsjsディレクトリ内にminディレクトリができ、中に圧縮されたindex.jsが生成されます。生成されたindex.js!function(){window.addEventListener("load",function(){alert("loaded")})}();これで圧縮もコマンドでできるようになりました。ファイルの監視さて、ここまでは毎回コマンドを実行するたびにタスクを実行してきました。それでは面倒なので、ファイルの変更を監視し、変更されたときにタスクが実行されるようにしておきましょう。今回はインストール不要で、gulpfile.jsにタスクを追加します。gulp.watch("sass/**/*.scss",["sass"]);});gulp.watch([‘監視するファイルのパターン’],[‘実行したいタスク1’]);で監視するファイルと実行するタスクを指定します。defaultという名前でtaskを作るとgulpとするだけでdefaultタスクを実行することができます。使うタスクはdefaultタスクにするといいでしょう。実行すると監視状態になるので、このままSCSSを修正してみましょう。するとタスクが実行され、CSSが出力されます。監視状態はctrl+cで解除することができます。LiveReload環境構築タスクの自動化が済んだところで、毎回更新ボタン押すのも面倒なので、ブラウザへの反映も自動化させていきたいと思います。今回はbrowser-syncを使用します。ファイルが変更されると画面を更新するだけでなく、スクロールやinputへの入力を全てのブラウザで同期してくれます。ChromeをスクロールすればiPhoneで見ている方もスクロールされてしまいます。https://www.npmjs.org/package/browser-syncこれまで通りタスクも追加しますが、今回はserver立ち上げタスクだけでなく、ファイルが変更されたらブラウザを更新するための処理をpipeで追加しています。gulp.watch("sass/**/*.scss",["sass"]);});続いてブラウザで表示するindex.htmlを作成します。<h1>Gulp入門</h1></body></html>ではタスクを実行してみましょう。gulpブラウザが起動して、先ほど作ったindex.htmlが表示されます。この状態でSCSSを修正してスタイルを変更してみてください。修正直後にブラウザも更新され、スタイルが反映されます。これで毎回更新をする必要もなくなります。CSSはSocket通信を介して差分更新(画面は更新されずCSSだけ更新)されるので、画像を多用したサイトを構築しているときにはその速度の違いに驚くと思います。エラー時にwatchを止めないこれで完璧に見えますが、Gulpには1つ弱点があります。nameと出て監視状態が解除されてしまいます。これではうっかりミスをする度にタスクを実行し直さなければならず、かえって面倒になってしまいます。そこでgulp-plumberを使ってエラーハンドリングをしてあげます。https://www.npmjs.org/package/gulp-plumbergulpfile.jsの各タスク実行前に.pipe(plumber())を実行してあげるだけです。nameエラーメッセージが表示されますが、監視状態は解除されなくなりました。まとめいかがでしたでしょうか。パッケージにはオプションも数多くあるので、カスタマイズの幅はもっと広いです。今回紹介したもの以外にもたくさんの便利なパッケージが存在します。いったパッケージを探す楽しみもありますね。下記に一部をご紹介します。https://www.npmjs.org/package/gulp-notifyGruntと比べて記述がシンプルで追加しやすいGulpは、効率化のためのツールですら効率化できると思います。Gulpを使ってさらなる効率化にチャレンジしてください。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。