上个月向领导提出的使用gulp+ejs模块化html最近得到了实施，大概记录下此次改造工作。

目录结构

html
  -dest
    --Folder
    --index.html
    --...
  -src
    --Folder
    --Modules
      ---header.html
      ---...
    --index.html
    --...
static
  -dest
    --css
    --js
    --img
  -src
    --css
    --js
    --img
    --less
node_modules
gulpfile.js
package.json

gulp模块

var gulp = require('gulp'),  
    less = require('gulp-less'),  
    minifycss = require('gulp-minify-css'),    
    jshint = require('gulp-jshint'),   
    uglify = require('gulp-uglify'),   
    imagemin = require('gulp-imagemin'),   
    pngquant = require('imagemin-pngquant'),    
    rename = require('gulp-rename'),    
    notify = require('gulp-notify'),    
    browserSync = require('browser-sync'), 
    ejs = require('gulp-ejs'),          
    changed = require('gulp-changed'),  
    replace = require('gulp-replace');

html选择了ejs来管理，css预处理选择了less。
简单、实用！

对于浏览器同步工具，本来使用的是live-reload，在初次使用中感觉不是很顺畅，之后换成了browserSync。
browserSync 除了文件更改实时刷新浏览器外，还有多设备同步功能，通过可视化控制台可以实时测试移动端代码。
对比而言，live-reload 依赖 Chrome 及 LiveReload 插件，应该是借助 Chrome 的某种开放接口实现的。
而 browserSync 是基于虚拟服务器的，所有可以实现多设备的控制。

工作流

编写html、less、js => 浏览器访问（URL对应html文件目录） => 浏览器显示编译后的html、css、js => html已经过模板合并，include等关键字是没有的 => css是less编译生成的，页面从始至终引用的都是 css 文件，不过会有一个对应的同名 less 文件。

改造进行阶段也没遇到什么太大问题，能遇到的问题也都能在github中找到答案。
不过还是要根据各自团队的项目情况因地制宜，合理配置。