0%

Programmingプログラミングナレッジ

Posted:2020.04.07

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

過去記事「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を扱ういいきっかけになるのではないでしょうか。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】