7. JavaScriptの圧縮を自動化
続いて、読み込み時間の最適化のよくある手法の1つJavaScriptの圧縮を自動化します。
もう慣れましたね。
npm install gulp-uglify --save-devgulp-uglify https://www.npmjs.org/package/gulp-uglify
サンプルとしてjsディレクトリにindex.jsを作成します。
- js/index.js
(function() {
window.addEventListener('load', function() {
alert('loaded');
});
})();続いてgulpfile.jsにタスクを追加します。
- gulpfile.js
var uglify = require("gulp-uglify");
gulp.task("js", function() {
gulp.src(["js/**/*.js","!js/min/**/*.js"])
.pipe(uglify())
.pipe(gulp.dest("./js/min"));
});では実行してみましょう。
gulp jsjsディレクトリ内にminディレクトリができ、中に圧縮されたindex.jsが生成されます。
- 生成されたindex.js
!function(){window.addEventListener("load",function(){alert("loaded")})}();これで圧縮もコマンドでできるようになりました。
8. ファイルの監視
さて、ここまでは毎回コマンドを実行するたびにタスクを実行してきました。しかしそれでは面倒なので、ファイルの変更を監視し、変更されたときにタスクが実行されるようにしておきましょう。
今回はインストール不要で、gulpfile.jsにタスクを追加します。
- gulpfile.js
gulp.task("default", function() {
gulp.watch(["js/**/*.js","!js/min/**/*.js"],["js"]);
gulp.watch("sass/**/*.scss",["sass"]);
});gulp.watch([‘監視するファイルのパターン’],[‘実行したいタスク1’]);で監視するファイルと実行するタスクを指定します。
defaultという名前でtaskを作ると
gulpとするだけでdefaultタスクを実行することができます。よく使うタスクはdefaultタスクにするといいでしょう。
実行すると監視状態になるので、このままSCSSを修正してみましょう。するとタスクが実行され、CSSが出力されます。
なお、監視状態はctrl+cで解除することができます。
9. LiveReload環境構築
タスクの自動化が済んだところで、毎回更新ボタン押すのも面倒なので、ブラウザへの反映も自動化させていきたいと思います。
今回はbrowser-syncを使用します。ファイルが変更されると画面を更新するだけでなく、スクロールやinputへの入力を全てのブラウザで同期してくれます。
ChromeをスクロールすればiPhoneで見ている方もスクロールされてしまいます。さっそく導入してみましょう。
npm install browser-sync --save-devbrowser-sync https://www.npmjs.org/package/browser-sync
これまで通りタスクも追加しますが、今回はserver立ち上げタスクだけでなく、ファイルが変更されたらブラウザを更新するための処理をpipeで追加しています。
- gulpfile.js
var browser = require("browser-sync");
gulp.task("server", function() {
browser({
server: {
baseDir: "./"
}
});
});
gulp.task("js", function() {
gulp.src(["js/**/*.js","!js/min/**/*.js"])
.pipe(uglify())
.pipe(gulp.dest("./js/min"))
.pipe(browser.reload({stream:true}))
});
gulp.task("sass", function() {
gulp.src("sass/**/*scss")
.pipe(frontnote())
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest("./css"))
.pipe(browser.reload({stream:true}))
});
gulp.task("default",['server'], function() {
gulp.watch(["js/**/*.js","!js/min/**/*.js"],["js"]);
gulp.watch("sass/**/*.scss",["sass"]);
});続いてブラウザで表示するindex.htmlを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content=""/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Gulp入門</h1>
</body>
</html>ではタスクを実行してみましょう。
gulpブラウザが起動して、先ほど作ったindex.htmlが表示されます。
この状態でSCSSを修正してスタイルを変更してみてください。修正直後にブラウザも更新され、スタイルが反映されます。これで毎回更新をする必要もなくなります。
CSSはSocket通信を介して差分更新（画面は更新されずCSSだけ更新）されるので、画像を多用したサイトを構築しているときにはその速度の違いに驚くと思います。
10. エラー時にwatchを止めない
これで完璧に見えますが、Gulpには1つ弱点があります。
今の状態でSCSSを誤った状態で保存するとstream.js:94 throw er; // Unhandled stream error in pipe. ^ Error: source string:24: error: invalid property nameと出て監視状態が解除されてしまいます。これではうっかりミスをする度にタスクを実行し直さなければならず、かえって面倒になってしまいます。
そこでgulp-plumberを使ってエラーハンドリングをしてあげます。
npm install gulp-plumber --save-devgulp-plumber https://www.npmjs.org/package/gulp-plumber
gulpfile.jsの各タスク実行前に.pipe(plumber())を実行してあげるだけです。
- gulpfile.js
var plumber = require("gulp-plumber");
gulp.task("js", function() {
gulp.src(["js/**/*.js","!js/min/**/*.js"])
.pipe(plumber())
.pipe(frontnote({
css: '../css/style.css'
}))
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest("./css"))
.pipe(browser.reload({stream:true}));
});
gulp.task("sass", function() {
gulp.src("sass/**/*scss")
.pipe(plumber())
.pipe(frontnote())
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest("./css"))
.pipe(browser.reload({stream:true}))
});タスクを実行してエラーを出してみると
[12:11:28] Plumber found unhandled error: Error in plugin 'gulp-sass' Message: source string:24: error: invalid property nameエラーメッセージが表示されますが、監視状態は解除されなくなりました。
まとめ
いかがでしたでしょうか。パッケージにはオプションも数多くあるので、カスタマイズの幅はもっと広いです。
また、今回紹介したもの以外にもたくさんの便利なパッケージが存在します。
こういったパッケージを探す楽しみもありますね。下記に一部をご紹介します。
- gulp-htmlhint（HTML文法チェック）
- gulp-jshint（JS文法チェック）
- gulp.spritesmith（スプライト画像生成）
gulp.spritesmith https://www.npmjs.org/package/gulp.spritesmith
- gulp-ejs（テンプレートエンジン）
- gulp-ect（テンプレートエンジン）
- gulp-sftp（SFTPアップロード）
- gulp-load-tasks（タスク読み込み支援）
gulp-load-tasks https://www.npmjs.org/package/gulp-load-tasks
- gulp-browserify（Browserify）
gulp-browserify https://www.npmjs.org/package/gulp-browserify
- gulp-notify（通知）
Gruntと比べて記述がシンプルで追加しやすいGulpは、効率化のためのツールですら効率化できると思います。
ぜひGulpを使ってさらなる効率化にチャレンジしてください。
Enjoy Gulp.js!!
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
