【個人用】ES6開発環境メモ

初めに

毎回調べて構築するのが面倒なので、雛形を個人用にまとめました。（あくまで個人用です。）
サーバー立ち上げにはExpressを使っています。（この後拡張しやすいようにするため。）
この後reactやthree.jsを使います。

package.jsonの中身

package.json

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "xxxxxxxxxxxx",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Yuma Kajihara",
  "license": "MIT",
  "devDependencies": {
    "babelify": "^6.4.0",
    "browser-sync": "^2.13.0",
    "browserify": "^13.1.0",
    "gulp": "^3.9.1",
    "node-dev": "^2.6.2",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "dependencies": {
    "babelify": "^6.4.0",
    "body-parser": "^1.15.2",
    "browser-sync": "^2.13.0",
    "browserify": "^13.1.0",
    "express": "^4.14.0",
    "gulp": "^3.9.1",
    "node-dev": "^2.6.2",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

gulpfile.jsの中身

gulpfile.js

var babelify = require('babelify');
var browserify = require('browserify');
var browserSync = require('browser-sync');
var buffer = require('vinyl-buffer');
var gulp = require('gulp');
var node = require('node-dev');
var source = require('vinyl-source-stream');


function errorHandler(err) {
  console.log('Error: ' + err.message);
}


// 自動ブラウザリロード
gulp.task('browser-sync', function() {
  browserSync({
    proxy: {
      target: 'http://localhost:3000'
    },
    port: 8080
  });
});


// Javascriptへのビルド
// ES6かつJSXなファイル群をbuild/bundle.jsへ変換する
gulp.task('build', function() {
  browserify({entries: ['./index.js']})
    .transform(babelify)
    .bundle()
    .on('error', errorHandler)
    .pipe(source('index.js'))
    .pipe(buffer())
    .pipe(gulp.dest('./build'))
    .pipe(browserSync.reload({stream: true}));
});


// ローカルサーバーの起動
gulp.task('server', function() {
  node(['./server.js']);
});


// ファイル監視
// ファイルに更新があったらビルドしてブラウザをリロードする
gulp.task('watch', function() {
  gulp.watch('./index.js', ['build']);
  gulp.watch('./index.html', ['build']);
  gulp.watch('./components/*.js', ['build']);
});


// gulpコマンドで起動したときのデフォルトタスク
gulp.task('default', ['server', 'build', 'watch', 'browser-sync']);

server.jsの中身

server.js

var fs = require('fs');
var path = require('path');
var express = require('express');
var bodyParser = require('body-parser');
var app = express();

app.set('port', (process.env.PORT || 3000));

app.use('/', express.static(__dirname));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));


app.listen(app.get('port'), function() {
  console.log('Server started: http://localhost:' + app.get('port') + '/');
});

フロー

1.npm initする。

2.package.jsonに上をコピペ。

3.npm install --save --save-dev babelify browser-sync browserify express gulp node-dev vinyl-buffer vinyl-source-streamを実行。

4.gulpfile.jsに上をコピペ。

5.server.jsを作る。

6その他諸々のファイルを用意する。＆gulpを実行。

お世話になった記事

・ES6 で書く環境（Babel + Browserify + gulp 編）＆ RxJS と jQuery の導入例
・React入門 - Part2: Browserify/Reactify/Gulpを使う
・babel-browserify-gulp-sample