Gulp4対応 Gulp+Pug+BrowserSyncでPug開発環境を構築する

最近仕事で静的ページで作られたサイトを、Pugでテンプレート化する作業をおこなったので、その時に用意した開発環境の構築手順を紹介する。

必要なパッケージのインストール

今回はGulpでPugのコンパイルをおこなうので、まずはnpmで必要なパッケージをインストールする。
※gulpは既にインストールされているものとする。

npm i -D gulp-pug gulp-cached browser-sync gulp-plumber 

gulpfile.jsの作成

今回作ったgulpfile.jsはこちら。

const gulp = require('gulp');
const plumber = require("gulp-plumber");
const browserSync = require('browser-sync');
const pug = require('gulp-pug');
const cached = require('gulp-cached');

// setting : paths
const pathSrc = {
  'html': [
    'src/pug/**/*.pug',
    '!src/pug/**/_*.pug'
  ]
}

const pathDist = {
  'browserSyncRoot': 'dist/',
  'html': 'dist/'
}

//gulpコマンドの省略
const { watch, series, task, src, dest, parallel } = require('gulp');

// Pug
task('pug', () => {
  return (
    src(pathSrc.html)
    .pipe(cached('pug')) // 変更があったファイルのみコンパイル
    .pipe(plumber())
    .pipe(pug({
      pretty: true
    }))
    .pipe(dest(pathDist.html))
  );
});

// browser-sync
task('browser-sync', () => {
  return browserSync.init({
    server: {
      baseDir: pathDist.browserSyncRoot
    },
    port: 8080,
    reloadOnRestart: true
  });
});

// browser-sync reload
task('reload', (done) => {
  browserSync.reload();
  done();
});

//watch
task('watch', (done) => {
  watch(pathSrc.html, series('pug', 'reload'));
  done();
});

task('default', parallel('watch', 'browser-sync'));

コードの細かい説明は省略するが、src配下にPugファイルを置き、dist配下に出力するようパスの設定している。

また、gulp-cachedプラグインでコンパイル対象を変更のあったファイルのみに限定しているところもポイント。
これが無いと、ファイル数が多くなってきた時にコンパイル時間がどんどん長くなってしまう。

gulpfile.jsの用意ができたら、gulpコマンドを実行する。

BrowserSyncによりローカルサーバーが立ち上がるので、Pugファイルを作成してみよう。

コンパイルに成功し、ブラウザのオートリロードが実行されればOK。