由于接了个项目，项目里面有很多样式重复的页面，或者还有比如说header或者footer这些每个页面几乎都有的模块。如果按照以往的技术，我肯定会选择直接复制粘贴啦，但是这样的最大问题就是，如果页面改动，那么你要逐个页面的去改动才能将整个网站改变，这样费时费力。于是乎，本着需求驱动技术的原则，学习了一下前端模板引擎ejs。当然，除了ejs还有很多模板引擎，但是业务紧急就选择了这么一个语法比较简单技术。为了将ejs本地编译成html，自动化构建工具进入视野，相比于grunt，我又选择了一个相对容易上手的gulp这么个工具。

准备工作

此处已默认全局安装gulp工具

本地安装gulp
1
npm install --save -dev gulp
  • 此处使用cnpm似乎无法安装，暂时未搞清楚原因
本地安装gulp-ejs
1
npm install --save -dev gulp-ejs
  • 此处--save和-dev自动把模块和版本号添加到package.json中devdependencies部分

项目结构

  • dist
    • layout.html //gulp-ejs插件生成结果
  • include
    • footer.html
    • header.html
  • node_modules
    • ……. //一些npm包
  • gulpfile.js //gulp任务文件
  • layout.ejs //ejs文件
  • package-lock.json //配置文件

ejs部分

ejs部分的语法比较的少，目前用到的就是

  • <% ‘脚本’ 标签，用于流程控制，无输出。
  • <%_ 删除其前面的空格符
  • <%= 输出数据到模板（输出是转义 HTML 标签）
  • <%- 输出非转义的数据到模板
  • <%# 注释标签，不执行、不输出内容
  • <%% 输出字符串 ‘<%’
  • %> 一般结束标签
  • -%> 删除紧随其后的换行符
  • %> 将结束标签后面的空格符删除
layout.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <%-include include/header.html %>   
  <p> 这是 layout 的内容 </p>   
  <%-include include/footer.html %>

  <% if (condition) { -%>
    <% for (var i = 0; i < students.length; i++) { -%>
      <li><%= students[i]%></li>
    <% } -%>
  <% } else { -%>
    <p>condition !== true</p>
  <% } -%>
</body>
</html>

此处注意<%- >和<% >的区别，加上’-‘并不会转义，而不加的话可以直接使用<% include include/header.ejs %>ejs书写的模板

header.html
1
2
// ./include/header.html 
<h1>header</h1>
1
2
// ./include/footer.html
<h1>footer</h1>
gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
var gulp = require('gulp');
var ejs  = require('gulp-ejs');
var data = require('gulp-data');
 
gulp.task('ejs', function() {
    gulp.src('**.ejs')
        .pipe(ejs({ 
          students: ["stu1", "stu2", "stu3"],
          condition: false
        }, {}, { ext: '.html' }))
    .pipe(gulp.dest('dist'));
});

然后在命令行中使用gulp ejs即gulp+任务名称的格式来执行任务，输出结果。ejs第一个参数为传递的数据，第二个基本不用，第三个是输出html文件

layout.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ./dist/layout.html
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <h1>header</h1>   
  <p> 这是 layout 的内容 </p>   
  <h1>footer</h1>

      <p>condition !== true</p>
  </body>
</html>

由此即可完成ejs模板的使用

后记

此外，推荐一个github上的项目，gulp-ejs-demo,感觉挺好用的，而且作者是hexo博客主题indigo的作者，风格我挺喜欢的。