React + Browserify + Gulp

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

• 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のビルドも書いてあります。

感想とか

• フロントエンド界隈は最近アップデートが追いついてなくて、上で出てきたほとんどのものは初めて触ったのだけど、どれもこれも素敵で好きになれそうｗ
• でも流行り廃りが早くておじさんついていけないよ。でも新しいことを勉強するって楽しい。