Help us understand the problem. What is going on with this article?

React + Browserify + Gulp

More than 5 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
  • でも流行り廃りが早くておじさんついていけないよ。でも新しいことを勉強するって楽しい。
nabe
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away