HTML的复用

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


gulp-file-include存在的问题:

  • 非JS语法;
  • 循环、条件语句无法嵌套;

搭建环境

新建项目文件ejsDemo,初始化项目文件,本地安装gulpgulp-ejsgulp-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结构
  

<%= 变量名 %>

//结束标识: <% }) %>

使用示例

你可能感兴趣的:(gulp,ejs)