React.JS 開発環境を Gulp と Browserify で作る

やりたいこと

JSX ファイルの保存を監視して任意の JS ファイルにコンパイルしたい。

設定ファイル

JSX ファイルや JS ファイルを読み込んでいる ./src/app.js をコンパイルして、./dist/js に出力するタスクの覚え書き。

gulpfile.js

'use strict';

var fs = require('fs');
var _ = require('underscore');
var gulp = require('gulp');
var gulpif = require('gulp-if');
var gutil = require('gulp-util');
var plumber = require('gulp-plumber');
var reactify = require('reactify');
var browserify = require('browserify');
var streamify = require('gulp-streamify');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var connect = require('gulp-connect');
var runSequence = require('run-sequence');
var packageJson = require('./package.json');

var SRC_DIR = packageJson.dir.src;
var DIST_DIR = packageJson.dir.dist;

/**
 * browserify
 */
gulp.task('browserify', function() {
  var jsFiles = packageJson.js;
  _.each(jsFiles, function(name) {
    return browserify({
      entries: [SRC_DIR + '/' + name + '.js'],
      transform: [reactify],
      paths: packageJson.browserify.paths,
      debug: packageJson.browserify.debug
    })
      .bundle()
      .on('error', errorHandler)
      .pipe(source(name + '.js'))
      .pipe(gulpif(isProduction,
                   streamify(uglify({ mangle: false }))))
      .pipe(gulp.dest(DIST_DIR + '/js'));
  });
});

/**
 * error handler
 */
var errorHandler = function(error) {
  gutil.log(gutil.colors.red(error));
};

/**
 * clean
 */
gulp.task('clean', function() {
  rimraf(DIST_DIR);
});

/**
 * connect
 */
gulp.task('connect', function() {
  connect.server({
    root: DIST_DIR,
    livereload: true,
    port: 8080
  });
});

/**
 * watch
 */
gulp.task('watch', function() {
  gulp.watch(SRC_DIR + '/**/*.js', ['browserify']);
  gulp.watch(SRC_DIR + '/**/*.jsx', ['browserify']);
});

/**
 * tasks
 */
gulp.task('default', function() {});

gulp.task('build', function(callback) {
  runSequence(
    'clean',
    'browserify',
    callback
  );
});

gulp.task('develop', function(callback) {
  runSequence(
    'build',
    'connect',
    'watch',
    callback
  );
});

package.json

{
  "name": "reactjs wasshoi",
  "scripts": {
    "test": "jshint ./gulpfile.js && jshint ./src && jsxhint ./src/components",
    "develop": "gulp develop",
    "build": "gulp build"
  },
  "js": [
    "app"
  ],
  "browserify": {
    "paths": [
      "./bower_components",
      "./src"
    ],
    "debug": false
  },
  "dir": {
    "src": "./src",
    "dist": "./dist"
  },
  "devDependencies": {
    "browserify": "^9.0.3",
    "gulp": "^3.8.11",
    "gulp-connect": "^2.2.0",
    "gulp-if": "^1.2.5",
    "gulp-plumber": "^0.6.6",
    "gulp-streamify": "0.0.5",
    "gulp-uglify": "^1.1.0",
    "gulp-util": "^3.0.4",
    "jshint": "^2.6.0",
    "jsxhint": "^0.14.0",
    "reactify": "^1.1.0",
    "rimraf": "^2.2.8",
    "run-sequence": "^1.0.2",
    "underscore": "^1.8.2",
    "vinyl-source-stream": "^1.0.0"
  }
}

コード例

ちなみに ./src/app.js はこんな感じ。

/src/app.js

'use strict';

require('./components/app.jsx');

./src/components 以下には JSX をゴリゴリ書いていく。

/src/components/app.jsx

/* @jsx React.DOM */

'use strict';

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var NotFoundRoute = Router.NotFoundRoute;
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var RouteHandler = Router.RouteHandler;

var Header = require('./header/Header.jsx');
var Dashboard = require('./common/Dashboard.jsx');

var App = React.createClass({
    displayName: 'App',
    render: function () {
    return (
      <div className="wrap">
        <Header/>
        {/* this is the important part */}
        <RouteHandler/>
      </div>
    );
  }
});

var routes = (
  <Route name="app" path="/" handler={App}>
    <Route handler={Dashboard}/>
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.getElementById('content'));
});