簡単にできると思ってたら Browserify で ./jsx/**/*.jsx
みたいなディレクトリ以下のファイルを指定するのに悩んだんのでメモ
ソースコード
# ファイル構成 . ├── gulpfile.js ├── index.html ├── jsx │ └── yo.jsx └── package.json
gulpfile.js
var browserify = require('browserify'); var glob = require('glob'); var gulp = require('gulp'); var reactify = require('reactify'); var source = require("vinyl-source-stream"); gulp.task('browserify', function(){ var src = glob.sync('./jsx/**/*.jsx'); return browserify({ entries: src, transform: [reactify] }) .bundle() .pipe(source('app.js')) .pipe(gulp.dest('./js')); });
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Yo</title> </head> <body> <div id="contents"></div> <script src="js/app.js"></script> </body> </html>
jsx/yo.jsx
/*globals React: true*/ var React = require('react'); React.render( <h1>Yo!</h1>, document.getElementById('contents') );
package.json
{ "devDependencies": { "browserify": "^10.2.4", "glob": "^5.0.10", "gulp": "^3.9.0", "react": "^0.13.3", "reactify": "^1.1.1", "vinyl-source-stream": "^1.1.0" } }
インストール
$ npm install
JS を1ファイルにまとめる
$ node_modules/.bin/gulp browserify
表示する
index.html を Firefox で開く