browserify
gulp
reactjs

React + Browserify + Gulp

More than 3 years have passed since last update.

以下のようなことがやりたくて環境を整えてみたのでメモ。



  • Reactつかいたい + JSXで書きたい

  • 再利用できそうなComponentを別のjsファイルにしておいて、requireで依存性を解決とかしたい

  • トップページ用のjsと、検索ページ用のjsが別々に存在してる、みたいな想定。うまく言えないけどrequireのrootが複数あるような?

  • watchしておいて勝手にビルドされるといいな

ということでタイトルのものを組み合わせてみたのだけれど、不勉強だからか意外とハマりました。。


package.json

色々試行錯誤していって最終的に以下のようなpackage.jsonが出来上がりましたという感じです。


package.json

{

"name": "test-proj",
"description": "test project",
"main": "gulpfile.js",
"scripts": {
"watch": "gulp watch"
},
"devDependencies": {
"browserify": "^9.0.3",
"gulp": "^3.8.11",
"gulp-compass": "^2.0.3",
"gulp-rename": "^1.2.0",
"gulp-sourcemaps": "^1.5.0",
"gulp-uglify": "^1.1.0",
"jquery": "^2.1.3",
"react": "^0.12.2",
"reactify": "^1.0.0",
"through2": "^0.6.3",
"vinyl-buffer": "^1.0.0"
}
}


gulpfile.js

そしてgulpfile.jsがこちら。package.jsonもそうだけど、いちど苦労したら後はこのファイルを共有すれば他のメンバーが苦労せずに済むって素晴らしい。


gulpfile.js

var gulp = require("gulp");

var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');
var through = require('through2');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var compass = require('gulp-compass');
var browserify = require("browserify");
var reactify = require("reactify");

gulp.task("browserify", function() {
var browserified = through.obj(function(file, enc, next) {
browserify(file.path)
.transform(reactify)
.bundle(function(err, res) {
file.contents = res;
next(null, file);
}
);
});

gulp.src("./js/src/*.jsx")
.pipe(browserified)
.pipe(rename({extname: ".min.js"}))
.pipe(buffer())
.pipe(uglify())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest("./js/dist"));
});

gulp.task("compass", function() {
gulp.src("./sass/**/*.scss")
.pipe(compass({
config_file: "config.rb",
comments: false,
css: "css",
sass: "sass"
}))
.pipe(gulp.dest("./css"));
});

gulp.task("watch", function() {
gulp.watch("./sass/**/*.scss", ["compass"]);
gulp.watch("./js/**/*", ["browserify"]);
});


一番ハマったのが複数のjsファイルをBrowserifyでビルドするところで、ググったらvinyl-source-streamとかvinyl-transformを使っているサンプルが出てきたんだけどうまくいかなくて、結局上のようになりました(どこかのFAQに載ってた)

あと、ついでにSCSS+Compassのビルドも書いてあります。


感想とか


  • フロントエンド界隈は最近アップデートが追いついてなくて、上で出てきたほとんどのものは初めて触ったのだけど、どれもこれも素敵で好きになれそうw

  • でも流行り廃りが早くておじさんついていけないよ。でも新しいことを勉強するって楽しい。