OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

GulpでJavascriptのテンプレートエンジンPugの開発環境を構築する

最終更新日:2020.4.9 Update!!
過去記事「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を扱ういいきっかけになるのではないでしょうか。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram