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
- ブラウザーを起動して、ライブリロードを行うためのもの
- Browsersync + Gulp.js
- その他
- gulp-load-plugins
- プラグインを簡単に読み込むためのもの
- gulp-util
- ログの出力など
- gulp-load-plugins
事前準備
- 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]); });
