ビルドツールGulpを使ってBrowserifyを実行する
「Gulp」は、フロントエンド開発で必要になる様々なタスクを定義・管理するツールです。また、ファイルを監視し、更新時に実行するタスクを定義することも可能です。書き方に少し癖がありますが、慣れてくれば独自のタスクを定義することもできるでしょう。
Browserifyはコマンドラインから実行することもできますが、コードを記述したほうが何かと柔軟に対応できるため、今回はタスクをコードで記述し、Gulp越しに実行することにしました。また、作成しているTODOアプリはJSXでコードを記述しているため、結合前にJSXからJavaScriptへのコンパイルする処理も加えます。
Browserifyによるビルドのイメージ
Gulpに実行させるタスクはJavaScriptで定義します。ここでは、次のようにタスクを定義したgulpfile.jsを作成しました。
gulpfile.js
var gulp = require('gulp');
var browserify = require('browserify');
var reactify = require('reactify');
var source = require('vinyl-source-stream');
gulp.task('js', function() {
browserify(['./src/app.js'])
.transform(reactify)
.bundle()
.on('error', function(err) {
console.log(err.message);
this.emit('end');
})
.pipe(source('bundle.js'))
.pipe(gulp.dest('./build/'));
});
gulp.task('watch', function() {
gulp.watch(['src/**/*.js'], ['js']);
});
定義したタスクは2つです。
js
- src/app.jsを探索の基点とし、依存するモジュールをすべて洗い出します
- Browserifyプラグイン「reactify」によって、JSXをJavaScriptに変換します
- 結合後のファイルをbuildディレクトリ以下に作成します
watch
- srcディレクトリ以下のファイルを監視し、更新されたらjsタスクを実行します。
また、package.jsonのscriptsにコマンドを登録しておくことで管理の一元化もできます。
例えば、buildタスクを実行するには次のようにします。
$ npm run build （gulp jsが実行される）
ここでで紹介した以外にも、Gulpには様々なタスク（例えばCSSプリプロセッサの実行など）を登録することができます。必要に応じて追加していくとよいでしょう。
HTMLからのリンクを書き直す
最後に、index.htmlを書き直し、生成されたbuild/bundle.jsのみを取得するようにします。また、JSXからJavaScriptへの変換が済んでいるため、JSXTransformerも不要になっています。
index.html
<html>
<head>
- <script src="http://fb.me/react-with-addons-0.12.2.js"></script>
- <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
</head>
<body>
<div id="app-container"></div>
- <script type="text/jsx" src="app.js"></script>
+ <script src="build/bundle.js"></script>
</body>
</html>
これで、開発を進めるための準備が整いました。
