Edited at

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

More than 3 years have passed since last update.


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'));
});