はじめに
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のビルドタスクは以下のように作っています。
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タスクです。
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とプロキシを使ったパターンで作成しました。
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
のどちらかがいいのかなと思っています。