导读
我们今天来聊一聊如何使用gulp编译生成jade模板；如果你想快速编写html，就可以使用node下很火的一款模板语法jade，
但你便写完代码后，想要立即看到效果就可以使用gulp生态里面的gulp-jade插件，它可以把jade文件动态编译渲染成html，
包括数据列表的渲染
我们要实现的目标效果是：编辑jade文件保存，页面自动热更新
案例代码 - 第一阶段 ( 初级阶段 )
下面这个案例实现了:
- 基本的
jade模板解析 - html文件生成
if逻辑条件判断- 动态数据渲染植入
- normal.jade文件内容如下
doctype html
html(lang="en")
head
title= jadePage
script(type='text/javascript').
if (foo) {
bar(1 + 5)
}
body
h1 Jade - node 模板引擎
#container.col
if youAreUsingJade
p You are amazing
else
p Get on it!
p.
为简洁而生，非常的简洁，模板化语言，强大的执行效率和强大的功能
div
a(href="http://www.google.com") google home page
button(disabled=true) Click Me
button(disabled=false) Click Me
- gulpfile.js编辑内容如下：
let gulp = require("gulp");
let gulpLoadPlugins = require('gulp-load-plugins');
let $ = gulpLoadPlugins({lazyload: true, rename:{});
const clear = (done) => {
del.sync(['./dist/newjade/*','!./dist/newjs','./dist/newcss/*','./dist/newcss'])
done()
}
const jades = (done) => {
gulp.src(["jade/normal.jade"])
.pipe($.jade({
locals: {
youAreUsingJade: true
}
}))
.pipe(gulp.dest("./dist/newjade/"))
done()
}
exports.default = gulp.series(clear, jades)
- 编译后的html内容如下：
<!DOCTYPE html><html lang="en"><head></head><title></title><script type="text/javascript">if (foo) {
bar(1 + 5)
}</script><body><h1>Jade - node 模板引擎</h1><div id="container" class="col"></div><p>Get on it!</p><p>为简洁而生，非常的简洁，模板化语言，强大的执行效率和强大的功能</p><div><a href="http://www.google.com">google home page</a></div><button disabled>Click Me</button><button>Click Me </button></body></html>
案例代码 - 第二阶段 ( 高级阶段 )
下面这个案例新增实现了:
while循环遍历内容gulp.wacth监听jade文件修改browser-sync热更新生成的normal.html页面展示- 配合
gulp-data插件，读取本地json文件中的数据渲染页面
- normal.jade文件内容新增如下：
......省略
- var num = 0
div
while num < myArr.length
span= myArr[num++]
2.normal.json 编辑如下：
{
"myArr": ["小松鼠","大老鼠","小花猫","大脸猪","小花狸","大眼鱼","hahahah","lalala","巴拉巴拉小魔仙"]
}
- gulpfile.js编辑如下：
let gulp = require("gulp");
let gulpLoadPlugins = require('gulp-load-plugins');
let $ = gulpLoadPlugins({lazyload: true, rename:{}});
let bs = require("browser-sync")
let del = require("del")
const clear = (done) => {
del.sync(['./dist/newjade/*','!./dist/newjs','./dist/newcss/*','./dist/newcss'])
done()
}
const jades = (done) => {
gulp.src(["jade/normal.jade"])
.pipe($.data(((file)=>{
//console.log(file.path)
console.log(file.path.slice(0,-4)+'json')
return require(file.path.slice(0,-4)+'json')
})))
.pipe($.jade())
.pipe(gulp.dest("./dist/newjade/"))
done()
}
const watchs = (done => {
let watcher = gulp.watch(["./jade/*"], gulp.series(clear, jades), function(cb){
cb()
})
let server = bs.create()
server.init({
server: {
baseDir: "./dist/newjade/",
index: "normal.html"
},
port: 8008,
})
watcher.on("change", function(){
server.reload()
})
done()
})
exports.default = gulp.series(watchs, clear, jades)
- 页面展示效果如下：
