watchifyとgulpで自動コンパイルと差分更新をおこなう

vuejsの開発環境を構築するでvueをビルドする環境を作成しました。

今回は開発環境をさらに便利にするために、ファイルが変更されたら自動でビルドを実行し、ブラウザをリロードする処理を実装します。

ファイルの監視とブラウザの自動更新

開発用のWEBサーバーを起動するパッケージgulp-webserverをインストールします。

npm install gulp-webserver --save-dev

前回作成したgulpfile.babel.jsを以下のように修正します。

import gulp from 'gulp';
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import webserver from 'gulp-webserver';
import browserify from 'browserify';
import babelify from 'babelify';
import vueify from 'vueify';

//デフォルトのタスク
gulp.task('default', ['build', 'webserver', 'watch']);

//開発用のWEBサーバーを起動するタスク
gulp.task('webserver', () => {
  gulp.src('./')
  .pipe(webserver({
    livereload: true,
    open: true
  }));
});

//vueをビルドするタスク
gulp.task('build', () => {
  browserify('./assets/app.js')
  .transform(babelify, { presets: ['es2015'] })
  .transform(vueify)
  .bundle()
  .pipe(source('app.js'))
  .pipe(buffer())
  .pipe(gulp.dest('./js'));
});

//ファイルを監視するタスク
gulp.task('watch', () => {
  gulp.watch('./assets/**/*', ['build']);
});

コマンドでgulpと実行するとWEBブラウザが立ち上がりlocalhost:8000が表示されると思います。

その状態で例えばApp.vueファイルを以下のように変更してみます。

<template>
  <div class="root">
    Hellow world
  </div>
</template>

<style scoped>
.root {
  --background-color: red; --修正前
  background-color: blue; --修正後
}
</style>

<script>
export default {
};
</script>

ファイルを保存すると自動でビルド処理が実行され、ブラウザが更新されると思います。

差分ビルド

ビルドを自動で行えるようになりましたが、1つのファイルを変更するたびに全てをビルドし直すと、規模が大きくなるとビルドに時間がかかってしまいます。

なので変更された部分のみ差分でビルドが行えるようにします。

差分更新を可能にするパッケージwatchifyをインストールします。

npm install watchify --save-dev

watchifyはビルド時にログを出力しないのでgulp-durationを使ってログを出力するようにします。

npm install gulp-duration --save-dev

gulp.babel.jsを以下のように変更します。

import gulp from 'gulp';
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import webserver from 'gulp-webserver';
import duration from 'gulp-duration';
import browserify from 'browserify';
import watchify from 'watchify';
import babelify from 'babelify';
import vueify from 'vueify';

gulp.task('default', ['build', 'webserver', 'watch']);

gulp.task('webserver', () => {
  gulp.src('./')
  .pipe(webserver({
    livereload: true,
    open: true
  }));
});

function buildScript (watch) {
  const props = {
    entries: ['./assets/app.js'],
    cache: {},
    packageCache: {},
    fullPaths: true
  };
  const bundler = watch ? watchify(browserify(props)) : browserify(props);
  bundler.transform(babelify, { presets: ['es2015'] });
  bundler.transform(vueify);
  function rebundle () {
    return bundler
    .bundle()
    .pipe(duration('compiled \'app.js\''))
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulp.dest('./js'));
  };
  if (watch) {
    bundler.on('update', () => {
      rebundle();
    });
  }
  return rebundle();
};

gulp.task('build', () => {
  return buildScript(false);
});

gulp.task('watch', ['build'], () => {
  return buildScript(true);
});

gulpと実行すると先ほどと同様にブラウザでlocalhost:8000が起動します。

ファイルを変更すると自動でビルドが行われ、ブラウザが再読込されますが、ビルドの時間が初回時のビルドと比べて減っているのを確認できると思います。


関連記事

  • watchifyとgulpで自動コンパイルと差分更新をおこなう

    今回は開発環境をさらに便利にするために、ファイルが変更されたら自動でビルドを実行し、ブラウザをリロードする処理を実装します。ファイルを変更すると自動でビルドが行われ、ブラウザが再読込されますが、ビルド...


  • Nunjucksの基本的な使い方 -extends,block,include-

    htmlのおすすめテンプレートエンジンNunjucksはとても便利なのです。extendsという機能を使えば、ヘッダやフッタの共通部分を作成しておき(ベースとなるファイル)、各ページではページごとに変...


  • npmのpackage.jsonを最新のバージョンに更新する

    package.jsonのパッケージを最新のバージョンに更新する方法を紹介します。最新のバージョンに更新するためには、package.jsonに記載されているパッケージのバージョンの記載を最新にする必...


  • less|cssに変数を使い実装を効率化する方法

    lessには変数を使うだけでなく、変数の色をX%明るくしたり、暗くしたり、透過したり、といった便利な関数も用意されています。また、要素を入れ子にして設定したり、関数を自作できるなど、とても便利な機能が...


  • gulpの便利なタスク gulpfile.jsの記述例

    gulpの便利なおすすめプラグインで紹介したプラグインなどを利用したgulpの便利なタスクの実装例を紹介します。less,js,htmlのコンパイルや軽量化、watchとlivereload、エラー時...


  • Nunjucksで独自のファンクションを実行する

    gulp-dataと組み合わせると、引数のような形で各ファイルにデータ(変数など)を渡すことができます。同じ容量で、変数ではなくファンクション自体をgulp-dataで設定すると、自分で定義したファン...


  • gulpでディレクトリ構造を維持したままdestにコピーする

    gulpで以下のようなフォルダ構成で、page.html、page2.htmlをそれぞれのフォルダ配下のフォルダにコピーする場合、普通にdestを指定するだけではうまくいかないことがあります。コピーす...


  • gulpの便利なおすすめプラグイン

    gulpを導入するとWEB開発をとても効率よく簡単に行うことができるようになります。私がよく利用している便利なプラグインを紹介します。


  • gulp-nunjucks-renderでNunjucksをgulpでコンパイルする方法

    Nunjucksをgulpでコンパイルする方法を紹介します。今回はgulp-nunjucks-renderを使用します。まずは、コマンドラインでgulp-nunjucks-renderをインストールし...


  • highlight.jsをローカルで実行してハイライトされたファイルを出力

    ホームページやブログでプログラムのコードを掲載する際に、以下のようにコードをシンタックスハイライト(色付け)をすることがあると思います。highlight.jsという便利なライブラリを使っていましたが...