tanaka's Programming Memo

プログラミングについてのメモ。

ReactのプロジェクトにBrowserify&ReactifyとGulpを導入してライブリロード(2015/7/1修正)

Browserifyは、JavaScriptで外部ファイルを簡単に読み込んでモジュール化する手段を提供してくれます。node.jsで動作させる時はrequireで同様のことができますが、その機能をブラウザー上で使えるようにしてくれます。

Gulpはプロジェクトのビルドやテスト、デプロイを自動化してくれるツールです。

参考URL

フォルダー構成

  • ソースファイルをsrcフォルダーに入れます
  • BrowserifyとJSXCompilerを通したJavaScriptファイルを入れておくdistフォルダーを作成します
  • テスト用に、以下のファイルを作成します
  • index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>browserify-gulpテスト</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://fb.me/react-0.13.3.min.js"></script>
  </head>

  <body>
    <div id="example"></div>

    <script src="dist/app.js"></script>
  </body>
</html>
  • src/app.js(src/app.jsx)
var Foo = React.createClass({
  render: function() {
    return (
      <div className='label label-primary'>
        Browserify+Reactify & Gulpサンプル
      </div>
    );
  }
});

React.render(
  <Foo />,
  document.getElementById('example')
);

JSXのインストール

ReactのjsxファイルをJavaScriptにビルドするためにreact-toolsをインストールします。すでにインストール済みの場合は飛ばしてください。

npm install -g react-tools

以下で、ビルドして動作を確認しましょう。

jsx src/ dist/

jsx -x jsx src/ dist


ビルドが完了したら、Finderなどでプロジェクトフォルダーのindex.htmlを参照して、ブラウザーで表示してみましょう。「Browserify+Reactify & Gulpサンプル」という文字列が青地で装飾されて表示されれば成功です。

BrowserifyとReactifyのインストール

Browserifyをインストール

Browserifyがインストールされていなければ、以下でインストールします。

npm install -g browserify

パッケージの準備

パッケージを管理できるように、package.jsonを作成しておきましょう。プロジェクトフォルダー内で以下を実行します。

npm init

必要に応じで項目を入力して、package.jsonを生成します。

Reactifyをインストール

Reactをrequireで利用するために、Reactと、BrowserifyをReactに対応させるためのReactifyをインストールします。これはプロジェクトにインストールする必要があります。--save-devフラグをつけて、package.jsonの開発用設定に組み込みましょう。

npm install --save-dev react reactify

browserifyとreactifyを連携させる

browserifyがreactifyを利用するように、package.jsonを開いて、"devDependencies"の定義の最後をコンマで区切って、以下の設定を追加します。

  "browserify": {
    "transform": [
      [
        "reactify",
        {
          "es6": true
        }
      ]
    ]
  }

Reactをrequireする

Browserifyが利用できるようになったので、Reactはrequireで解決します。

src/app.jsの1行目に以下を追加します。

var React = require('react');

index.htmlから以下の1行を削除します。

    <script src="https://fb.me/react-0.13.3.min.js"></script>

browserifyのテスト

以下をターミナルで実行してみましょう。

browserify src/app.js -o dist/app.js

browserify -t reactify src/app.jsx -o dist/app.js


これで、requireを解決した上で、JSXをJavaScriptにビルドもしてくれます。成功したらindex.htmlをWebブラウザーで表示してみてください。先ほどと同じようにページが表示されれば成功です。

Gulpの利用

ここまで、ターミナルから手打ちでコマンドを入力しましたが、毎回それをやるのは面倒です。そこでビルドツールのGulpを利用します。

Gulpのインストール

インストールしていない場合は、以下でインストールしてください。

npm install -g gulp

また、gulpでビルドを実行するにはプロジェクトフォルダーに利用するモジュールが全てインストールされている必要があるので、以下を改めて実行してインストールする。

npm install --save-dev gulp browser-sync react browserify reactify vinyl-source-stream
  • browser-sync は、ライブリロードを行うためのプラグインです
  • vinyl-source-stream は、BrowserifyをGulpで利用する際に必要なものです

Gulp用の設定ファイルを作成

フォルダー直下にgulpfile.jsを作成して、reactjs - React入門 - Part2: Browserify/Reactify/Gulpを使う - Qiitaを参考に作成した以下のコードを書きます。

var gulp = require('gulp');
var browserify = require('browserify');
var source = require("vinyl-source-stream");

gulp.task('browserify', function(){
  return browserify('./src/app.js')
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./dist'));
});

gulp.task('default', ['browserify']);

以上で、srcフォルダー内のapp.jsを、distフォルダーのapp.jsにビルドします。以下で、ビルドできます。

gulp

成功したら、index.htmlをWebブラウザーで表示して、先ほどまでと同じように表示されることを確認してください。

パッケージの作成

reactjs - React入門 - Part2: Browserify/Reactify/Gulpを使う - Qiitaに、package.jsonの作り方が記載されています。すでにここまでの手順で実施ずみです。

これをやっておくと、GitHubなどにはpackage.jsonのみを登録しておけば、node_modulesフォルダーは管理しなくてもよくなります。クローン先でnpm installをやれば、環境が構築されます。

ファイルの更新を監視

ここまでで、reactjs - React入門 - Part2: Browserify/Reactify/Gulpを使う - Qiitaの内容は完了しました。まだこのままでは不便なので、
これからはじめるGulp(3):gulp.watchでファイルの変更を監視しタスクを実行する | Webデザイン、フロントエンド系の技術に関する備忘録 - whiskers
を参考に、ファイルが修正されたら自動的にビルドが実行されるようにします。

監視タスクの作成は簡単で、以下をgulpfile.jsの最後に追加します。

// 監視タスクを作成
gulp.task('watch', function() {
  gulp.watch('./src/*', ['browserify']);
});
  • watchという名前で監視のタスクを作れます
  • 関数として、gulp.watch()を利用して、1つめの引数に、監視するファイルのパターンを書きます。例では、srcフォルダー内のどれかのファイルの変更を監視します
  • 2つめの引数で、実行するタスクを配列で指定します

監視の起動

ターミナルで以下を実行します。

gulp watch

src/app.jsxファイルを適当に変更して、保存してみてください。自動的にリビルドされます。

リビルド後にブラウザーでライブリロードする

Browsersync + Gulp.jsを参考に、ライブリロードするタスクをgulpに組み込みます。

  • gulpfile.jsの最初の方のrequire()をしているあたりに、以下の2行を追加します。
var browserSync = require('browser-sync');
var reload = browserSync.reload;
  • browserifyタスクのパイプの最後に、ブラウザの再読み込みを追加します。修正後は以下のとおりです。
gulp.task('browserify', function(){
  return browserify('./src/app.js')
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./dist'))
    .on('end', function() {
      reload();
    });
});
  • 監視タスクにブラウザーの起動設定を以下のとおり追加します。
// 監視タスクを作成
gulp.task('watch', function() {
  browserSync({
    notify: false,
    logPrefix: 'BS',
    server: ['.']
  });
  gulp.watch('./src/*', ['browserify']);
});
  • 上記の server の配列に、ブラウザーに表示させたいベースディレクトリを指定します。この例ではプロジェクトフォルダー直下のindex.htmlが開きます。

ターミナルで

gulp watch

で監視を開始します。その後、srcフォルダー内のファイルを変更すると、自動的にリビルドされて、ブラウザーの表示が切り替わります。


以上で、ブラウザーサイドのrequireの利用、Reactのビルド、ファイルの監視、ブラウザーでのライブリロードができるようになります。

完成ファイル

以下に、ここまでのgulpfile.jsを示します。

var gulp = require('gulp');
var browserify = require('browserify');
var source = require("vinyl-source-stream");
var gutil = require('gulp-util');
var browserSync = require('browser-sync');
var reload = browserSync.reload;


gulp.task('browserify', function(){
  return browserify('./src/app.js')
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./dist'))
    .on('end', function() {
      reload();
    });
});

// 監視タスクを作成
gulp.task('watch', function() {
  browserSync({
    notify: false,
    logPrefix: 'BS',
    server: ['.']
  });
  gulp.watch('./src/*', ['browserify']);
});

gulp.task('default', ['browserify']);
{
  "name": "browserify-gulp-example",
  "version": "0.0.1",
  "description": "this package for browserify-gulp example",
  "author": "YuTanaka",
  "license": "MIT",
  "devDependencies": {
    "browser-sync": "^2.7.13",
    "browserify": "^10.2.4",
    "gulp": "^3.9.0",
    "react": "^0.13.3",
    "reactify": "^1.1.1",
    "vinyl-source-stream": "^1.1.0"
  },
  "browserify": {
    "transform": [
      [
        "reactify",
        {
          "es6": true
        }
      ]
    ]
  }
}

あとで入れたいもの

Watchifyでbrowserifyを差分ビルド - Qiita
ビルド速度が遅くなってきたら、上記のプラグインを入れることでbrowserifyのビルドが高速化するようです。