tanaka's Programming Memo

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

Gulp+React+Babel(babelify)+watchify+BrowserSyncを使ったビルド設定

gulp JavaScript React Web 勉強メモ

Reactの復習と、記憶を呼び戻すための自分用のメモです。uglifyやらmapファイルの作成もしてないごく簡単な動作確認用のものです。

利用するもの

  • Gulp
    • ビルドやデプロイなどを行うツール
  • React
    • クライアントサイドのビューを担当するエンジン
  • Babel
    • 策定中のJavaScriptの仕様を、現在のブラウザー上で動かせるようにするコンパイラ。ファイルの統合やReactの対応も行う
    • gulp-babelだとwatchifyとの連携方法などが不明だったので、babelify+browserifyを利用する
    • babelify, browserify, vinyl-source-stream が必要
    • es2015とReactに対応させるために、 babel-preset-es2015, babel-preset-react も必要
  • wathify
    • ファイルを監視して、変更のあったファイルのみをビルドするためのbrowserifyを拡張するもの
  • BrowserSync
  • その他
    • gulp-load-plugins
    • gulp-util
      • ログの出力など

事前準備

  • babel --version で、エラーが表示される場合は、 npm uninstall -g babel として古いものを削除しておく
  • GulpとBabelをグローバルにインストールしておく(gulp -vやbabel --versionでバージョンが表示されたらこの手続きは不要)
npm i -g gulp-cli babel-cli

必要なパッケージをインストールする

  • ターミナルで、開発するプロジェクトフォルダーに移動
  • 必要なパッケージをインストール
npm i --save-dev gulp babelify browserify babel-preset-es2015 babel-preset-react vinyl-source-stream watchify browser-sync gulp-load-plugins gulp-util

ビルド対象のプロジェクト

  • ここでは、Reactのチュートリアルのtutorial1.jsをビルドする
  • プロジェクトフォルダー内の構造を以下の通り、少し変更してある
    • tutorial1.jsは、プロジェクトフォルダー直下のsrcフォルダー内に配置
    • ビルド後のファイルは public/scripts/app.js に出力
  • public/index.htmlを以下のように修正
    • public/scripts/app.jsの読み込みを追加
    • ビルド後は普通のJavaScriptとして実行できるので、browser.min.jsの読み込みは削除して、 text/babel の表記を text/javascript に変更
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorial</title>
    <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="css/base.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/javascript" src='scripts/app.js'></script>
  </body>
</html>

gulpfile.jsを作成する

プロジェクトフォルダー直下に、 gulpfile.js を作成して、以下の内容にします。

var config = {
    srcFolder: 'src',
    srcFile: 'tutorial1.js',
    dstFolder: 'public/scripts',
    dstFile: 'app.js'
};

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var browserSync = require('browser-sync').create();
var $ = require('gulp-load-plugins')();

var b = browserify({
    entries: config.srcFolder+'/'+config.srcFile,
    cache: {},
    packageCache: {},
    plugin: [watchify]
});
b.on('update', rebundle);
b.on('log', $.util.log);

function rebundle() {
    return b
        .transform(babelify, {presets: ['es2015', 'react']})
        .bundle()
        .on('error', $.util.log.bind($.util, 'Browserify Error'))
        .pipe( source( config.dstFile ))
        .pipe( gulp.dest( config.dstFolder ) )
        .on('end', function() {
            browserSync.reload();
        });
}

gulp.task('bundle', function() {
    return rebundle();
});

gulp.task('watch', ['bundle'], function() {
    browserSync.init({
        logPrefix: 'BrowserSync',
        server: ['public']
    });

    gulp.watch('public/*.html', ['bundle', browserSync.reload]);
});