Pug(元Jade)のテンプレートエンジンをgulp使てみます。
設定方法
gulpのインストールと作業ディレクトリへの移動は省略します。
gulpのインストールなどはこちらの記事を参考にしてください。
gulp-pugをインストールします。
npm install gulp-pug --save-dev
gulpfile.jsに以下のように記述します。
var gulp = require('gulp'),
pug = require('gulp-pug');
gulp.task('pug', function() {
gulp.src(
['./pug/**/*.pug', '!./pug/**/_*.pug']
)
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('./develop'))
});
pugディレクトリを作成して、そのディレクトリ内でindex.pugを作成します。
index.pug
doctype html
html(lang="ja")
head
meta(charset="utf-8")
link(rel="stylesheet", href="css/style.css")
title テストページ
body
.contents
h1.ttl Pugのテストです。
以下のコマンドを実行します。
gulp pug
以下のようなindex.htmlが生成できました。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>テストページ</title>
</head>
<body>
<div class="contents">
<h1 class="ttl">Pugのテストです。</h1>
</div>
</body>
</html>
【参考サイト】
- pugjs/pug: Pug – robust, elegant, feature rich template engine for Node.js
- gulp-pug
- 【Jade/Pug】gulpでJade / Pugをコンパイルする – Snaplog
コメントが承認されるまで時間がかかります。