はじめに

Vue2のディレクトリ構成を考えるという記事を以前書きましたが
http://qiita.com/kurosame/items/b3f5bee8ea73df025cb1

その時のフロントエンドの環境について
検討して構築した内容を書きたいと思います。

ライブラリ検討

ローカル環境で開発する時は、以下のサイクルで開発しています。

① プログラムの変更
② 変更を監視してビルドして、公開フォルダに置く
③ ブラウザをリロード
④ プログラムの変更（①に戻る）

②と③の部分を自動化するために以下のライブラリを検討しました。

webpack-dev-server
webpack-dev-middleware + webpack-hot-middleware
gulp.watch + browser-sync

ビルドに関してはWebpackにて行います。
（本記事ではwebpack.configについては書いていません）

webpack-dev-serverが良さそうでしたが、
webpack-dev-serverとbrowser-syncで検索してみると
browser-sync寄りな意見が目についたので、、

今回はbrowser-syncを使ってみることにします。

watch & build

Gulpを使っている前提となってしまうのですが、
Gulpのビルドタスクは以下のように作っています。

webpack.js

const gulp = require('gulp')
const webpackStream = require('webpack-stream')
const webpack = require('webpack')
const webpackConfig = require('../webpack.config')

module.exports = gulp.task('webpack', () => {
  return gulp.src('src')
    .pipe(webpackStream(webpackConfig, webpack)) // 第2引数にwebpackを渡すことで任意のバージョンが使える
    .pipe(gulp.dest('dist'))
})

GulpでWebpackを使う際はwebpack-streamを使います。
前に確認した時はwebpack-streamはWebpack1系だったと思うので、
2系を使いたい時などは、第2引数で任意のバージョンのwebpackを渡してあげれば、それが使えます。

続いてwatchタスクです。

watch.js

const gulp = require('gulp')

module.exports = gulp.task('watch', () => {
  gulp.watch('src/**', () => {
    gulp.start('webpack')
  })
})

単純にgulp.watchでsrc配下を監視して、
更新があったら、webpackタスクを実行します。

これでsrc配下をwatchしてbuildすることができました。

watch & reload

BrowserSyncを使ったブラウザ関連のタスクは以下のように作っています。
HTML5のHistoryAPIとプロキシを使ったパターンで作成しました。

browserSync.js

const gulp = require('gulp')
const browserSync = require('browser-sync').create()
const history = require('connect-history-api-fallback')
const proxy = require('http-proxy-middleware')

// プロキシ設定
const proxies = proxy('/api', {
  target: 'http://aaa.bbb.example.com:1234',
  changeOrigin: true,
  logLevel: 'debug'
})

gulp.task('browserSync', () => {
  browserSync.init({
    port: 8000,
    browser: 'Google Chrome',
    server: {
      baseDir: 'dist',
      index: 'src/index.html',
      middleware: [history(), proxies]
    },
    https: true
  })

  gulp.watch('dist/**', () => {
    browserSync.reload()
  })
})

ここでもgulp.watchを使っています。
dist配下を監視して、更新があったらブラウザをリロードします。
ちなみにdistは公開ディレクトリです。

これでdist配下をwatchしてリロードすることができました。

後はrun-sequenceを使ってタスクを順次実行します。

const runSequence = require('run-sequence')
runSequence('webpack', 'watch', 'browserSync')

さいごに

Webpackを使っていない頃はGulpは必須でしたが、
Webpackを導入してからは、Gulpをやめる方向も考えています。

そうなると
・webpack-dev-server
・browser-sync + webpack-dev-middleware + webpack-hot-middleware
のどちらかがいいのかなと思っています。

Gulp + Webpack2 + BrowserSyncで開発環境を作る

はじめに

ライブラリ検討

watch & build

watch & reload

さいごに