快適な開発環境を目指して(Gulp + Browserify)
横着しないでひとつづつ理解していくことにする。 今回は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に比べてシンプルな記述が可能。
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
にコンパイルすることができた。