過去記事「GulpでJavascriptのテンプレートエンジンEJSの開発環境を構築する」ではGulpを使ってEJSでHTMLファイルを生成する方法についてまとめていましたが、今回はGulpでPugを使えるように環境構築してみたいと思います。   Pugは当メディアでも過去記事で取り扱っていますが、HTMLを効率よくコーディングできるテンプレートエンジンで、マークアップの他にも変数や関数、ファイルのインクルードなどプログラミング処理などができるようになります。基本的な使い方など詳しくは過去記事をご覧ください。 （参考記事） Pugで覚えておくと便利なコーディング方法まとめ（機能編） Pugで覚えておくと便利なコーディング方法まとめ（記法編）   Pugは単体でも使えますが、タスクランナーのGulpと組み合わせて使うことで、より効率よく開発ができるようになります。GulpでPugを扱うには「gulp-pug」というパッケージが必要になるので、プロジェクトのディレクトリまで移動し、ローカルにパッケージをインストールします。

$ npm install --save-dev gulp-pug

  パッケージをインストールしたら「package.json」に追記されているのが確認できます。これでGulpでPugを使うことができます。 【package.json】※一部省略

......
 "devDependencies": {
  ......
  "gulp-pug": "^4.0.1",
  ......
 }
......

  続いて「gulpfile.js」にPugをコンパイルするタスクを追加していきます。先ほどインストールしたglup-pugのパッケージを読み込み、glup.task()で処理を記述していきます。 【gulpfile.js】

const pug = require("gulp-pug");

gulp.task("pug", function() {
 return gulp
  .src(["src/pug/**/*.pug", "!" + "src/pug/**/_*.pug"])
  .pipe(pug( { pretty: true } ))
  .pipe(gulp.dest("dist"));
});

// watchでPugファイル更新を監視する場合
gulp.task("default", function(done) {
 gulp.watch("src/pug/*.pug", gulp.task("pug"));
 done();
});

  EJSの時と同じですが、ソースファイルの指定で拡張子が「.pug」のものを全て指定しますが、先頭にアンダーバーが付いたパーシャル化されたファイルはコンパイルしないため除外しておきます。そして、GulpのPugではコンパイル時のソースコード整形オプションが指定できますので、整えるようにしておきます。最後にコンパイルされたHTMLファイルの出力先ディレクトリを指定して完了です。   上記のコードは下記のディレクトリを想定した内容になります。プロジェクトに合わせて調整してください。Pugファイルはコンパイルされて、distフォルダ内にHTMLファイルとして出力されます。

node_modules
gulpfile.js
dist
src
 ┗ pug
   ┗ test.pug

  Pugのコンパイルは上記のコードですと、次のコマンドで実行することができます。

$ npx gulp pug

  コマンドを実行すると、Pugファイルと同じ名前のHTMLファイルが出来上がっています。

node_modules
gulpfile.js
dist
 ┗ test.html
src
 ┗ pug
   ┗ test.pug

 

Gulpのバージョン4系で推奨されている記述方法について

Gulpのバージョンが4系の場合には、gulp.task()が非推奨となっており、関数でタスクを記述する形になりますので、実際には下記のような形になります。 【gulpfile.js】

const { src, dest, watch } = require("gulp"),
 plumber = require('gulp-plumber'),
 notify = require('gulp-notify'),
 pug = require('gulp-pug');

const taskPug = (done) => {
 src(["src/pug/**/*.pug", "!" + "src/pug/**/_*.pug"])
  .pipe(plumber(
   { errorHandler: notify.onError('Error: <%= error.message %>') }
  ))
  .pipe(pug({ pretty: true }))
  .pipe(dest('dist'));
  done();
};

// Watch
const taskWatch = (done) => {
 watch('src/pug/**/*.pug', taskPug);
 done();
}

exports.default = taskWatch;

 

---

  テンプレートエンジンにはいろんな種類がありますが、個人的にはPugが機能も豊富で最も効率よく書けるので気に入っています。Pug単体では導入しにくい場合でも、このようにGulpと組み合わせて使うことで、Pugを扱ういいきっかけになるのではないでしょうか。