pugの導入から基本的な書き方について
pugとは
- HTMLを書くためのテンプレートエンジンです
- HTMLの作成を簡単にするもの
- タグで囲むことがない代わりに、改行やインデントで全体を構成する
pugファイル
div.hoge
h2.hoge-title タイトル
div.hoge-button
a(href="#", target="_blank") リンク
p.hoge-text テキスト
htmlにcompile
<div class="hoge">
<h2 class="hoge-title">タイトル</h2>
<div class="hoge-button"><a href="#" target="_blank">リンク</a></div>
<p class="hoge-text">テキスト</p>
</div>
導入
pugを導入するにはnpm、またはgulpを使う
npmの場合
package.json
{
"scripts": {
"start": "yarn run watch:pug --watch",
"build": "yarn run pug",
"pug": "pug src/pug/ --hierarchy -o dist/html -P",
"watch:pug": "pug src/pug/ --hierarchy -o dist/html -P -w"
},
"dependencies": {
"pug": "^2.0.3",
"pug-cli": "^1.0.0-alpha6",
"pug-loader": "^2.4.0"
}
}
scriptのoption
-h, --help output usage information
-V, --version output the version number
-O, --obj <str|path> JSON/JavaScript options object or file
-o, --out <dir> output the rendered HTML or compiled JavaScript to
<dir>
-p, --path <path> filename used to resolve includes
-P, --pretty compile pretty HTML output
-c, --client compile function for client-side runtime.js
-n, --name <str> the name of the compiled template (requires --client)
-D, --no-debug compile without debugging (smaller functions)
-w, --watch watch files for changes and automatically re-render
-E, --extension <ext> specify the output file extension
-s, --silent do not output logs
--name-after-file name the template after the last section of the file
path (requires --client and overriden by --name)
--doctype <str> specify the doctype on the command line (useful if it
is not specified by the template)
--hierarchy 階層構造を維持したまま出力
gulpの場合
package.json
{
"scripts": {
"start": "gulp watch",
"build": "gulp build",
"gulp": "gulp"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-plumber": "^1.2.0",
"gulp-pug": "^4.0.1",
"gulp-watch": "^4.3.5"
}
}
gulpfile.js
const gulp = require('gulp');
const plumber = require('gulp-plumber');
const pug = require('gulp-pug');
// pug
gulp.task('pug', () => (
gulp.src([
'src/pug/**/*.pug',
'!src/pug/**/_*.pug', // includeファイルは対象外
])
.pipe(plumber())
.pipe(pug({
pretty: true,
}))
.pipe(gulp.dest('./dist/'))
));
// watch
gulp.task('watch', () => {
gulp.watch('src/pug/**/*.pug', ['pug']);
});
gulp.task('build', ['pug']);
gulp.task('default', ['pug']);
書き方
idとclassを指定
- 複数classを指定する場合はspaceなし
section#hoge.foo.fuga
div.piyo
属性を指定
- カッコで囲む
- 複数指定する場合はカンマで区切る
a(href="#", target="_blank")
video.m-video-01(src="./hoge.mp4", poster="hoge.png" autoplay loop)
テキストを書く
- タグの後に書く場合は半角を空ける
- 改行する場合は「|」を使う
a(href="#", target="_blank") リンクテキスト
p
| テキスト
includeで別ファイルを読み込む
- includeのファイル名は大文字が使えない
include _include/_header
forを使う
- for (var i = 0; i < 3; i += 1)
li
a(href="#")
img(src="test.jpeg", alt="")
div
h2 タイトル
p テキスト
コメントアウト
// HTMLに残るコメント
//- HTMLに残らないコメント
//
ブロックコメントです。
このコメントはHTMLに残ります。
//-
ブロックコメントです。
このコメントはHTMLに残りません。