Middleman 4 の新機能を試す シリーズGulp から Browserify を実行する

はじめに

今回は Middleman 4 の外部パイプラインを試すために Gulp から Browserify を実行するまでを試します。

node.js の環境準備

とりあえず最新のバージョンで node.js の環境を用意します。

$ ndenv install v6.6.0
Downloading node-v6.6.0-darwin-x64.tar.gz...
-> https://nodejs.org/dist/v6.6.0/node-v6.6.0-darwin-x64.tar.gz
Installing node-v6.6.0-darwin-x64...
Installed node-v6.6.0-darwin-x64 to /Users/rin/.anyenv/envs/ndenv/versions/v6.6.0

$ ndenv local v6.6.0 でローカルのバージョンを設定。

Gulp のインストール

続いてグローバルに gulp-cli をインストールします。

$ npm install --global gulp-cli

npm の設定を行ってローカルには gulp をインストール。

$ npm init
$ npm install --save-dev gulp

Gulp のバージョンを確認。

$ gulp -v
[18:16:43] CLI version 1.2.2
[18:16:43] Local version 3.9.1

Gulp の動作確認

Gulp のタスクファイルを作って動作確認をしてみます。
とりあえず動いていることを確認するためにコンソールに Hello World! と出力するためだけのサンプルです。 gulpfile.js というファイルを作成して、以下のタスクを記述します。

var gulp = require('gulp');

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

ファイルができたら Gulp コマンドを実行して動作を確認します。

$ gulp
[18:22:02] Using gulpfile ~/Projects/mm4/gulpfile.js
[18:22:02] Starting 'default'...
Hello World!
[18:22:02] Finished 'default' after 238 μs

問題なさそうですね。

Gulp から Browserify を実行する

次に Gulp から Browserify を使ってみます。 細かい説明は省きたいのでこちらの記事 [フロントエンド] gulpからBrowserifyを利用する、watchでコンパイルする を参考にします。

必要なモジュールをインストール

$ npm install --save-dev browserify
$ npm install --save-dev vinyl-source-stream

タスクの作成

モジュールのインストールが完了したら gulpfile.js に追記する形でタスクを作ります。
Browserify の記事で使った JavaScript をコンパイルします。

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

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

gulp.task('browserify', function () {
  return browserify('./source/assets/javascripts/main.js')
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./source/assets/javascripts/'));
});

ビルド

タスクを実行してビルドを試します。

$ gulp browserify
[18:52:22] Using gulpfile ~/Projects/mm4/gulpfile.js
[18:52:22] Starting 'browserify'...
[18:52:22] Finished 'browserify' after 119 ms

main.js と同じ階層に bundle.js ができたら成功です。

終わりに

これで Gulp から Browserify を使ったビルドができるようになりました。
次回は Middleman 4 の外部パイプライン（external_pipeline）を使って Middleman のビルド時に $ gulp 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」エラーの直し方（小ネタ）