这次我们介绍一个新的npm包来完成这项任务，会有更好的体验呢；
gulp-file-include存在的问题：
- 非JS语法；
- 循环、条件语句无法嵌套；
搭建环境
新建项目文件ejsDemo，初始化项目文件，本地安装gulp、gulp-ejs、gulp-data：
npm init -ynpm 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模板：
<%- include('filePath') %> 解析变量：
<%= variableName %> JS逻辑：
<% JS逻辑 %> JavaScript和html混合写法，示例：
//开始标识：<% arr.forEach(function(item){ %> //中间写HTML结构 <%= 变量名 %>
//结束标识：<% }) %>