先日、Gulpを使ったES6の開発環境について下記の記事で紹介した。
browserifyを使ったリアルタイムプレビュー開発環境において、Gulpのwatchを使うよりも「watchify」を使う方が一般的だそうなので、構築した環境の設定について紹介する。
なお、ベースとなる環境は先程挙げた過去記事を参考にしてほしい。
追加プラグインのインストール
まずは以下のコマンドでwatchifyをインストールする。
npm install --save-dev watchify
gulpfile.js コード全文
gulpfile.jsに以下の設定を書き、ターミナルで「gulp」コマンドを実行するとブラウザが立ち上がる。
以後、srcフォルダ内の拡張子jsファイルを更新するたびに、jsフォルダ内にbundle.jsが出力され、立ち上がったローカルサーバーも自動的にリロードされる。
const gulp = require('gulp'); const browserify = require('browserify'); const plumber = require("gulp-plumber"); const browserSync = require('browser-sync'); const babelify = require('babelify'); const source = require('vinyl-source-stream'); const watchify = require('watchify'); //setting : paths const paths = { 'jsSrc': './src/*.js', 'jsDist': './js/', 'jsMain': './src/main.js' } //gulpコマンドの省略 const { watch, series, task, src, dest, parallel } = require('gulp'); // browser-sync task('browser-sync', () => { return browserSync.init({ server: { baseDir: paths.root }, port: 8080, reloadOnRestart: true }); }); // browser-sync reload task('reload', (done) => { browserSync.reload(); done(); }); // browserify function bundle(watching=false) { const b = browserify({ entries: [paths.jsMain], transform: ['babelify'], debug: true, plugin: (watching) ? [watchify] : null }) .on('update', () => { bundler(); console.log('scripts rebuild'); }); function bundler() { return b.bundle() .on('error', (e) => { console.log(e.message); }) .pipe(source('bundle.js')) .pipe(dest(paths.jsDist)); } return bundler(); } task('bundle', (done) => { bundle(true); done(); }); //watch task('watch', (done) => { watch([paths.jsSrc], series('bundle', 'reload')); done(); }); task('default', parallel('watch', 'browser-sync'));