前回『ReactJS と Browserify と reactify のメモ』 の続き。
なにやら reactify から babelify に乗り替えた方が良さげ みたいなので変更する。
あと watch もできるようにする。
変更するコード
gulpfile.js
var babelify = require('babelify'); var browserify = require('browserify'); var glob = require('glob'); var gulp = require('gulp'); var source = require("vinyl-source-stream"); var is_enable_source_maps = true; var jsx_path = './jsx/**/*.jsx'; gulp.task('browserify', function() { var src = glob.sync(jsx_path); return browserify(src, { debug: is_enable_source_maps }) .transform(babelify) .bundle() .on("error", function (err) { console.log("Error : " + err.message); }) .pipe(source('app.js')) .pipe(gulp.dest('./js')); }); gulp.task('watch', function() { gulp.watch(jsx_path, ['browserify']); });
package.json
{ "devDependencies": { "babelify": "^6.1.2", "browserify": "^10.2.4", "glob": "^5.0.10", "gulp": "^3.9.0", "react": "^0.13.3", "vinyl-source-stream": "^1.1.0" } }
面倒なので node_modules ディレクトリ削除して npm install やり直す
実行
jsx を js に変換して app.js にまとめる
$ node_modules/.bin/gulp browserify
watch する
$ node_modules/.bin/gulp watch