最近仕事で静的ページで作られたサイトを、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。