Middleman 4 の新機能を試す シリーズWatchify を使った Browserify の 変更監視と自動バンドル

はじめに

今回は Browserify の Watch ができる Watchify を使って変更監視と自動バンドルを行ってみます。 Browserify の環境がすでにできている前提で話しを進めます。

Watchify のインストール

とりあえず Watchify をインストールします。グローバルとローカルにインストールする方法がありますが、今回はコマンドを直で叩いて実行するのでグローバルにインストールします。

$ npm install -g watchify
$ which watchify
/usr/local/bin/watchify
$ watchify --version
watchify v3.7.0 (in /usr/local/lib/node_modules/watchify)
browserify v13.1.0 (in /usr/local/lib/node_modules/watchify/node_modules/browserify)

Watchify を実行してみる

$ watchify コマンドを実行してバンドルしてみます。main.js を編集して bundle.js に変更が反映されているか確認してみてください。実行してみても上手くいっていればログは何も流れません。

$ watchify source/assets/javascripts/main.js -o source/assets/javascripts/bundle.js

自動バンドルの状態をログに流す

自動バンドルの状態をログに流したい場合は --verbose オプションを使います。

$ watchify source/assets/javascripts/main.js -o source/assets/javascripts/bundle.js -v
1574 bytes written to source/assets/javascripts/bundle.js (0.08 seconds)
1578 bytes written to source/assets/javascripts/bundle.js (0.02 seconds)

変更監視を止めるには ctrl + c をします。これで自動バンドルできるようになりました。
短いですが今回はこれでお終い。次回は Gulp から Watch してみたいと思います。

シリーズ

1. Middleman 4 をインストールしてみる
2. Middleman 4 で middleman-blog をインストールしてみる
3. Browserify を試してみる
4. Gulp から Browserify を実行する
5. Watchify を使った Browserify の 変更監視と自動バンドル
6. Gulp から Watchify と Browserify を使う
7. Middleman 4 の External Pipeline（外部パイプライン）を試す
8. Middleman 4 の External Pipeline を活用した Sass のプリコンパイルと Browserify のバンドル
9. Middleman 4 で middleman-syntax を使った Syntax Highlight（小ネタ）
10. gulp-sass で Font Awesome を導入する方法（Bourbon, Neat 対応）
11. Middleman 4 の External Pipeline に対応した Skeleten（テンプレート）「middleman-tail」 を作った
12. Wercker の step-s3sync で起こった 「Parameter problem: Invalid source/destination」エラーの直し方（小ネタ）