Gulp で Jade の extends, include ファイルを更新する時のブラウザリロードを効率化

jade の extends, include ファイルを更新時は全てのファイルをコンパイルする必要ある。
でもブラウザリロードが何回も発生したり、現在表示しているページのコンパイルタイミングが後になることも。
さらにはブラウザリロードが重なって、現在表示しているページのブラウザリロードが上手くいかないなんてこともある。

大量の html ファイルを出力する場合だとこの問題は結構つらい。
折角 extends、include で効率化してるのに、確認に時間がかかっちゃう。

ってことで extends, include を更新した場合は
gulp を起動（watch）して最後に表示したページの jade ファイルをはじめにコンパイル＆ブラウザリロードして、それ以外の jade ファイルをコンパイルだけするって方法をとることにした。

これで表示確認もすぐできて、かつ裏で残りのファイルのコンパイルが進むので、きっとみんな幸せになれるはず。

ディレクトリ構成

┬ htdocs
└ jade ──┬ extends
         ├ includes
         └ src

gulpfile

babel で書いています。

gulpfile.babel.js

// モジュールの読み込み
const gulp        = require('gulp');
const gulpif      = require('gulp-if');
const { join }    = require('path');
const watch       = require('gulp-watch');
const browserSync = require('browser-sync').create();
const jade        = require('jade');
const cache       = require('gulp-cached');


// 現在表示しているページの情報
let viewingPage = '';


// デフォルトタスク
gulp.task('default', [ 'watch', 'browser-sync', 'jade' ]);


// 監視
gulp.task('watch', () => {
  watch('jade/src/**/*.jade', { ignoreInitial: false }, () => gulp.start('jade'));
  watch('jade/!(src)/**/*.jade', { ignoreInitial: false }, () => gulp.start('jade-all'));

  watch('htdocs/**/*.html', { ignoreInitial: false }, (file) => {
    const page = viewingPage ? join(__dirname, 'htdocs', viewingPage) : '*.html';

    gulp.src(file.path)
      .pipe(gulpif(page, browserSync.reload()));
  });
});


// ローカルサーバー
gulp.task('browser-sync', () => {
  browserSync.init({
    server: {
      middleware: (req, res, next) => {
        const url = req.url.match(/^.*\/(.+\.html)?$/);
        if(url) {
          if(url[0].match(/\/$/)) {
            viewingPage = `${ url[0] }index.html`;
          } else {
            viewingPage = url[0];
          }
        }
        next();
      },
    },
  });
});


// jade のコンパイル

gulp.task('jade', () => {
  jadeTask('jade/src/**/*.jade', 'htdocs', true);
});

gulp.task('jade-all', () => {
  if(viewingPage) {
    const path = `${ viewingPage.match(/^(.+)\.html$/)[1] }.jade`;
    const dest = viewingPage.match(/^(.*\/).+\.html$/)[1];
    jadeTask(join('jade/src', path), join('htdocs', dest), false);
    jadeTask(['jade/src/**/*.jade', `!${ join('htdocs', path) }`], 'htdocs', false);
  } else {
    jadeTask('jade/src/**/*.jade', 'htdocs', false);
  }
});

const jadeTask = (srcPath, destPath, isSrcDirUpdate) => {
  return gulp.src(srcPath)
    .pipe(gulpif(isSrcDirUpdate, cache('jade')))
    .pipe(gulpJade())
    .pipe(gulp.dest(destPath));
};

とりあえず関係している部分だけ適当にコピって最小構成にしただけなので、なんか抜けたり間違ってたりするかも。。。
あと、ひととおりの動きを確認しただけなのでバグもあるかも。

本当はコンパイルするファイルも更新したファイルに関係するものだけに絞りたいんだけど、
extends の extends とかあったりするから、結構大変そうだと思ってやってない。
そこまで出来れば最高だね。