Middleman 4 の新機能を試す シリーズGulp から Watchify と Browserify を使う

はじめに

今回は Gulp から Watchify と Browserify を使ってみたいと思います。

Watchify インストール

Gulp から Watchify を使いたいのでローカルにインストールします。

$ npm install watchify --save-dev

タスクを作る

以前作成した Browserify を実行するタスクを改良します。
まずは全体のソースコードがこちら。

var gulp       = require('gulp');
var browserify = require('browserify');
var source     = require('vinyl-source-stream');
var watchify   = require('watchify');

gulp.task('default', function() {
  // place code for your default task here
  console.log("Hello World!");
});

var options = {
  entries: "source/assets/javascripts/main.js", // トランスパイルする対象のファイルを指定
  cache: {},
  packageCache: {},
  plugin: [watchify] // watchify を読み込む
}
var b = browserify(options);

gulp.task('browserify', bundle); 
b.on('update', bundle); // watchify.on() で対象ファイルが更新されたら bundle() を実行

function bundle() {
  return b.bundle()
    .pipe(source('bundle.js')) //出力するファイル名
    .pipe(gulp.dest('./.tmp/dist')); //出力先
}

プラグインを指定するだけで Gulp タスクはほぼそのままでいけます。あとはイベント（watchify.on()）を使って監視します。

タスクを試す

タスクを実行してみます。監視状態になったら main.js を変更してみるとトランスパイルされたファイルもしっかり変更されていました。

$ gulp browserify
[18:47:43] Using gulpfile ~/Projects/mm4/gulpfile.js
[18:47:43] Starting 'browserify'...
[18:47:43] Finished 'browserify' after 229 ms

監視を終了するには ctrl + c をします。

終わりに

これで Gulp から Watchify と Browserify を使うことができました。
次回は Middleman の External Pipeline（外部パイプライン）と合わせて使ってみたいと思います。

参考記事

• gulpのbrowserifyとwatchifyの違いを実際に使いながら理解する
• watchifyでbrowserifyを素早くビルドする

シリーズ

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」エラーの直し方（小ネタ）