文系プログラマー

快適な開発環境を目指して（Gulp + Browserify）

javascript 開発環境

横着しないでひとつづつ理解していくことにする。今回はGulpとBrowserifyを合わせて使ってみる。

参考：

javascript - Why do I have to use vinyl-source-stream with gulp? - Stack Overflow

gulp/API.md at master · gulpjs/gulp · GitHub

Gulp + Browserify: The Everything Post | Viget

Gulp

フロントエンドのビルドツール。 Gruntの後発でより簡潔にソースコードを記述できる。

Browserify

require()をフロントエンドJavaScriptでも使えるようにするnodeモジュール。競合のwebpackに比べてシンプルな記述が可能。

uraway.hatenablog.com

Gulp API

gulp.src()

glob（ワイルドカードパターン）を引数に取り、vinylファイルのstreamを返す。vinyl streamは仮想ファイルフォーマットで、gulpはこのvinyl streamを処理する。返り値をpipeに渡すことで、様々なプラグインを使ってファイルに変化を加えることができる。

glob

詳しくはnode-glob。例えば、以下のようなディレクトリ構成があるとする。

client/
  a.js
  bob.js
  bad.js

client以下すべてのファイルはclient/*.jsと表すことができる。また、マッチしたファイル以外をglobにしたい時は!client/b*.jsのように!を使う。

gulp.dest()

引数のフォルダに対しファイルを書き出す。再びpipeにつなげることもできる。引数のフォルダがなければ新たに作られる。

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

gulp.task()

orchestratorを使ってtaskを定義する。

gulp.task('somename', function() {
  // Do stuff
});

Gulp + Browserify

準備は整った。gulpfile.jsを編集していく。

var browserify = require('browserify');
var gulp       = require('gulp');

gulp.task('browserify', function() {
    return browserify('./public/javascripts/app.js')
        .bundle()
        .pipe(gulp.dest('./build/'));
});

gulp.task('default',['browserify']);

このままだとエラーが出る。bundleの返り値はGulpが扱えるファイルストリーム（vinyl）ではないから。なので、vinyl-source-streamを使う。引数は書き出し先のファイルネーム。返り値はvinyl stream形式になる。

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

gulp.task('browserify', function() {
    return browserify('./public/javascripts/app.js')
        .bundle()
        //Pass desired output filename to vinyl-source-stream
        .pipe(source('bundle.js'))
        // Start piping stream to tasks!
        .pipe(gulp.dest('./build/'));
});

gulp.task('default',['browserify']);

これでBrowserifyでapp.jsをbuild/bundle.jsにコンパイルすることができた。