728x90
gulp-pug
gulpfile.js
const gpug = require("gulp-pug");
const routes = {
pug : {
watch: 'src/**/*.pug',
src: 'src/**/*.pug',
dest: "dist"
}
}
const pug = () =>
gulp
.src(routes.pug.src)
.pipe(gpug({ pretty:true }))
.pipe(gulp.dest(routes.pug.dest));
./include/layout.pug
doctype html
html.no-js(lang='en')
head
meta(charset='utf-8')
meta(http-equiv='x-ua-compatible' content='ie=edge')
title Test Pug
meta(name='viewport' content='width=device-width, initial-scale=1')
link(rel='stylesheet' href='../css/style.css')
body
block header
include head.pug
section#main
block main
.wrap
block content
block foot
footer#footer
block run
./include/head.pug
block header
header#header
a(href="#") logo
test.pug
extends ./include/layout.pug
block content
h1= title
- var pets = ['cat', 'dog']
each petName in pets
include pet.pug
block foot
h1 footer
block run
script.
alert('hello!')
pet.pug
p= petName
결과
test.html
<!DOCTYPE html >
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<title>Test Pug</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/style.css"/>
</head>
<body>
<header id="header"><a href="#">logo</a></header>
<section id="main">
<div class="wrap">
<h1></h1>
<p>cat</p>
<p>dog</p>
</div>
</section>
<h1>footer</h1>
<script>alert('hello!')</script>
</body>
</html>
728x90