gulp.watch()でpugのコンパイルをしない方法

前回のポストの続きです。

gulp-changedを使って変更のあったテンプレートのみコンパイルする方法では、include元のファイルに変更が合った場合に、include先のpugファイルに変更が伝わらない問題がありました。

今回は、この問題を解決(回避)する方法を紹介します。

解決したい問題

一般的なGulpタスクのように、

1. ファイルの変更を検知
2. src/**/*.pugを全て再コンパイル
3. browserSyncをリロード

のような流れでタスクを書くと…pugファイルが増えた時、2.のコンパイルに時間がかかり、リロードがなかなかされなくなります。
数秒〜数十秒にもなると開発どころではありません。。

pugのlayoutやincludeといった機能を使っていると、「どのファイルがどのファイルをインクルードしているか」が分からないため、全てのファイルを再コンパイルする必要があり、この問題を解決する事がどうにも難しいようです。

そこで、コンパイルした静的なHTMLをホストするのではなく、PHPなどと同様に動的に、リクエストに対してHTMLを生成すれば良いのでは…？と思いmiddleware化する事でこれを実現しました。

コンパイルはbrowserSyncのmiddlewareを使う

browserSyncは内部的にconnectが採用されているので、同様のインタフェースでmiddlewareを定義できます。

middlewareを作る

やりたい事は、HTMLへのリクエストに対してpugのコンパイル結果を返すだけなので、１つ関数定義するだけで実現できました。
(gulp-dataなどでデータを渡している場合、もう一手間必要です。)

function pugMiddleWare (req, res, next) {
  const requestPath = url.parse(req.url).pathname;

  // .html or / で終わるリクエストだけを対象とする
  if (!requestPath.match(/(\/|\.html)$/)) {
    return next();
  }

  // HTMLファイルが存在すれば、HTMLを返す
  const htmlPath = path.parse(requestPath).ext == '' ? `{requestPath}index.html` : requestPath;
  if (fileExists(path.join('path/to/base/dir', htmlPath))) {
    console.info(`HTML発見 ${htmlPath}`);
    return next();
  }

  // pug のファイルパスに変換
  const pugPath = path.join('path/to/src', htmlPath.replace('.html', '.pug'));
  
  // pugファイルがなければ404を返す
  if (!fileExists(pugPath)) {
    console.info(`Pugファイル見つかりません ${pugPath}`);
    return next();
  }

  // pugがファイルを見つけたのでコンパイルする
  const content = pug.renderFile(pugPath, {
    basedir: 'path/to/src,
    compileDebug: true,
    pretty: '  ',
    ...data
  });

  // コンパイル結果をレスポンスに渡す
  res.end(new Buffer(content));
  next();
}

function pugMiddleWare (req, res, next) {

const requestPath = url.parse(req.url).pathname;

// .html or / で終わるリクエストだけを対象とする

if (!requestPath.match(/(\/|\.html)$/)) {

return next();

}

// HTMLファイルが存在すれば、HTMLを返す

const htmlPath = path.parse(requestPath).ext == '' ? `{requestPath}index.html` : requestPath;

if (fileExists(path.join('path/to/base/dir', htmlPath))) {

console.info(`HTML発見 ${htmlPath}`);

return next();

}

// pug のファイルパスに変換

const pugPath = path.join('path/to/src', htmlPath.replace('.html', '.pug'));

// pugファイルがなければ404を返す

if (!fileExists(pugPath)) {

console.info(`Pugファイル見つかりません ${pugPath}`);

return next();

}

// pugがファイルを見つけたのでコンパイルする

const content = pug.renderFile(pugPath, {

basedir: 'path/to/src,

compileDebug: true,

pretty: ' ',

...data

});

// コンパイル結果をレスポンスに渡す

res.end(new Buffer(content));

next();

}

browserSyncにmiddlewareを渡す

あとは、このmiddlewareをbrowserSyncのmiddlewareとして渡してあげれば完了です。

browserSync.init({
  server: {
    middleware: [
      pugMiddleWare
    ]
  }
});

browserSync.init({

server: {

middleware: [

pugMiddleWare

]

}

});

gulp.watch()

コンパイルはリクエストを受けた時点で行うので、ファイルの変更を検知したらリロードするだけでOKです。これで、コンパルの待ち時間は実質0秒になりました！

gulpWatch('path/to/src/**/*.pug', () =&gt; {
  browserSyn.reload()
})

gulpWatch('path/to/src/**/*.pug', () => {

browserSyn.reload()

})

さいごに

この方法ならpugにかぎらず、どんなテンプレートエンジンでも同じ方法でコンパイルを最小限に抑えることができます。

ただあくまでも、browserSyncなどを使った開発時に有効な手段のため、最終書き出し時にはある程度時間がかかります。
libsassの様にpugが高速化される事を期待したいところです。

2016/09/27 Gulpでpugのコンパイルを100倍早くするちょっとしたテク	2016/04/19 JadeとStylusを使った、Pythonicなマークアップの勧め
2015/04/22 【2015年度版】今更！Sublime Textの痒いところに手が届く設定たち	2015/04/29 フロントエンドエンジニアでもわかる文字コードのはなし-その1「Shift_JISのはなし」

gulp.watch()でpugのコンパイルをしない方法

解決したい問題

コンパイルはbrowserSyncのmiddlewareを使う

middlewareを作る

browserSyncにmiddlewareを渡す

gulp.watch()

さいごに

関連記事