Pugでhtmlをコンパイル
sassのようにhtmlでもコンパイルできないものかと探していたらpugがいい感じだったのでメモ
似たようなものでhamlがあるが、pugしました。
理由は下記
- コンパイルがnode
- 記法がsassに似ている
インストール
まずはNodeをインストールNode
node -v
v10.15.0
npm install pug -g
# 今回は-gでマシン全体にしました。
# 開発のみなら-Dでpackage.jsonにしてもいいかも
コンパイル
test.pug
doctype html
// コメント
html(lang="ja")
head
meta(charset="utf-8")
style(src="css/style.css")
title テスト
body
h1#sitettl Pugタイトル
main.main
h2.content_ttl サブタイトル
pug test.pug
pug.html
<!DOCTYPE html>
<!-- コメント-->
<html lang="ja">
<head>
<meta charset="utf-8">
<style src="css/style.css"></style>
<title>テスト</title>
</head>
<body>
<h1 id="sitettl">Pugタイトル</h1>
<main class="main">
<h2 class="content_ttl">サブタイトル</h2>
</main>
</body>
</html>
gulpでコンパイル
sassと同じくpugもgulpでコンパイルを自動でタスク処理をしました
必要なパッケージをインストール
# gulpをインストールgulpのバージョンはGulp 4
npm install gulp -D
npx gulp -v
# CLI version 2.0.1
# Local version 4.0.0
# pug 用のgulp パッケージをインストール
npm i -D gulp-pug gulp-notify gulp-plumber
gulpファイルを作成
ディレクトリの構造はこんな感じ
develop/
├──assets/
├──pug/ #ここにpugファイルを作成
public/ # ここにhtmlファイルを作成
gulpfile.js
// パッケージをインストール
const gulp = require("gulp");
const notify = require("gulp-notify");
const plumber = require("gulp-plumber");
const pug = require("gulp-pug");
//pug入力先、html出力先を記述
const paths = {
src: {
pug: "develop/assets/pug/**/*.pug",
},
public: {
html: "public/",
},
};
// setting : Pug Options
const pugOptions = {
pretty: true,
};
// pugコンパイル
gulp.task("pug", done => {
gulp
.src(paths.src.pug)
.pipe(
plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
)
.pipe(pug(pugOptions))
.pipe(gulp.dest(paths.public.html));
done();
});
gulp.task("dev", () => {
gulp.watch(paths.src.pug, gulp.task("pug"));
});
gulpを動かす
package.json
"scripts": {
"dev": "gulp dev"
}
npm run dev
# Using gulpfile ~\gulpfile.js
# Starting 'dev'...
# Starting 'pug'...
# Finished 'pug' after 22 ms
# こんな感じになればdevelop/assets/pugのファイルがpublicにhtmlが作成される