Posted at

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

More than 1 year has passed since last update.


はじめに

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-serverbrowser-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

のどちらかがいいのかなと思っています。