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模板：
<%- include('filePath') %>

解析变量：
<%= variableName %>

JS逻辑：
<% JS逻辑 %>

JavaScript和html混合写法，示例：

//开始标识：
<% arr.forEach(function(item){ %>
  //中间写HTML结构
  <div>
    <h2><%= 变量名 %></h2>
  </div>
//结束标识：
<% }) %>

使用示例