html 地址复用,HTML的复用

这次我们介绍一个新的npm包来完成这项任务，会有更好的体验呢；

gulp-file-include存在的问题：

非JS语法；

循环、条件语句无法嵌套；

搭建环境

新建项目文件ejsDemo，初始化项目文件，本地安装gulp、gulp-ejs、gulp-data：

npm init -y

npm install -D gulp gulp-ejs gulp-data

各工具包的功能：

gulp：gulp插件运行的环境；

gulp-ejs：使用ejs模板语法构建HTML的基础；

gulp-data：引入外部数据文件的工具；

创建配置文件

gulp的配置文件gulpfile.js：

var gulp = require("gulp");

var ejs = require("gulp-ejs");

var data = require("gulp-data");

//gulp.task定义gulp任务；

gulp.task("compile-ejs",function(){

//gulp.src定义入口文件的路径；

//ext:".html"生成文件的后缀名

//gulp.dest定义导出文件的路径；

gulp.src("../source/**/*.ejs")

.pipe(ejs({},{},{ext:".html"}))

.pipe(gulp.dest("../build/"));

});

//gulp.watch监听文件的改变，执行依赖的任务"compile-ejs"；

gulp.task("watch",["compile-ejs"],function(){

gulp.watch("../source/**/*.ejs",["compile-ejs"]);

});

//default 任务默认执行；

gulp.task("default",["watch"],function(){

console.log("编译成功；")

})

gulp-ejs的参数讲解：

第一个参数：数据对象；

第二个参数：没用过；

第三个参数：设置生成文件类型；

定义模板文件

在package.json的scripts语句中，定义命令行的快捷方式：

gulp --gulpfile ./config/gulpfile.js

可以在命令行中使用npm start来代替gulp --gulpfile ./config/gulpfile.js；

引入内部数据

gulp.task("compile-ejs", function () {

gulp.src("../source/**/*.ejs")

.pipe(ejs({

title:"标题"

}, {}, { ext: ".html" }))

.pipe(gulp.dest("../build/"));

});

引入外部数据

单独的外部数据

gulp.task("compile-ejs", function () {

gulp.src("../source/**/*.ejs")

.pipe(data(function (file) {

//直接应用数据对象中的数据；

return JSON.parse(fs.readFileSync("../source/json/global.json"));

}))

.pipe(ejs({}, {}, { ext: ".html" }))

.pipe(gulp.dest("../build/"));

});

多个外部数据

gulp.task("compile-ejs", function () {

gulp.src("../source/**/*.ejs")

.pipe(data(function () {

// 通过home、users对象引用数据对象；

return {

home: JSON.parse("../source/json/home.json"),

users: JSON.parse("../source/json/users.json")

}

}))

.pipe(ejs({}, {}, { ext: ".html" }))

.pipe(gulp.dest("../build/));

})

Ejs语法

引入ejs模板：

解析变量：

JS逻辑：

JavaScript和html混合写法，示例：

//开始标识：

//中间写HTML结构

//结束标识：