Web开发是一个前后端合作的工作,但在开发的前期,双方约定好接口和数据后,就进入了各自的开发,这时候前端就需要有自己的开发环境,能够与最后和后端联调时后端提供的服务器能力接近,并且能够简化前端的工作流程,自动化完成相关任务。gulp就是这样一个工具,允许我们编写一系列的task,只需一个命令即可运行监听我们想执行的动作,并且gulp是基于编程的,给了我们更多自己动手的可能。

那我们具体需要怎样的一套环境呢:

  • 根据 mock 数据和我们编写的模板输出html文件
  • 开启服务器调试,服务器具有输出接口的能力
  • css 预处理、字体图标制作等其他任务
  • 当测试设备过多时,在文件改动时能够自动刷新以方便查看页面

这样,我们就可以不必依赖后端的环境和数据,在约定接口后各自开发,直到联调。除非有接口变动,基本不会出错,bug率大大降低。可以腾出更多的时间和大家交(shui)流(qun)技(dou)术(meizi)。

后端模板支持

虽然现在是 ajax 的天下了,不过有些数据还是通过页面同步输出的,这里我们使用的使用的是 FreeMarker 模板。前端是不能直接解析这些模板文件,所以调试起来就很麻烦。以前看过好多人先写 html 后缀的文件,然后造假的节点放到页面中,开始调样式,调试好后再改造成为后端模板文件。这样做效率很低,很难保证不会在复制粘贴中出错。

所以需要找到编译的工具:FMPP - FreeMarker-based file PreProcessor,基于Freemarker的文件预处理器,就像我们用的CSS预处理器一样。通过他摆脱后端环境的束缚。总的来说: HTML = FTL + DATA. FMPP 就是通过数据和模板生成 html 文件, 和后端渲染输出是一个道理,可以做到和后端环境无差别。

注:使用前先下载并加入环境变量

异步接口支持

之前结合FMPP只是解决了同步接口的问题,那对于异步接口,我们如何mock数据进行调试呢。这里引入了优秀而且简单的 express, 借助 express 强大的路由来实现前端模拟异步接口的功能。

同时可以引入gulp-nodemon插件,在你修改了异步接口后,不必重启gulp,服务器会自动重启。

其他 gulp 任务

gulp 提供了许多有用的插件,可以串联起来完成很复杂的操作。我这里只写了mcss 和 iconfont 两个任务。

如何使用

填写配置


/**
 * gulp-mock-server config
 */

module.exports = {
    // freemarker模板设置
    // src 模板根路径
    // mock mock数据路径
    // dist 模板编译后的html路径
    freemarker: {
        src: './template',
        mock: './_mock',
        dist: './_dist'
    },

    // 路由和模板的映射
    // 路由|模板名、数据(tdd)和编译后的html一一对应
    // /user/list <-> /template/user/list.ftl <-> /mock/sync/user/list.tdd <-> /dist/user/list.html
    router: {
        '/': '/index.ftl',
        '/index': '/index.ftl',
        '/user/info': '/user/info.ftl'
    },

    // express服务器设置
    server: {
        root: __dirname,
        port: 8088,
        livereload: ['./src/javascript/**/*.js', './src/css/**/*.css']
    },

    // 样式
    style: {
        src: './src/mcss/',
        dist: './src/css/'
    },

    // 图标字体
    iconfont: {
        src: './res/svg/*.svg',
        dist: './res/fonts/',
        cssTpl: './res/fonts/_icontpl.mcss',
        cssName: 'iconfont.mcss',
        fontName: 'myfont',
        fontClass: 'myicon'
    },

    //...
}

在这里重点关注 router 配置,为了和后端环境保证一致,需要配置和后端约定好的路由和路由对应的模板地址。当启动 express 服务器时,直接访问路由,就会去找对应的模板渲染的 html。

如果有自己的扩展任务也建议将配置项配置在这里,然后在 _gms/parseConfig.js 中解析,完成其他任务。

在填写完配置后,首先运行 gulp init,会根据 freemarker 项生成项目初始目录。

运行 gulp 命令

gulp 

运行效果大致如图:

gms

总结

这里只是实现了最简单的前端 Server 的功能,其实还有事情可做,比如接口管理、接口测试、文档管理、数据 Mock等等。现在有很多高大上的 Mock Server 了,比如网易的 NEI

不过基于 Gulp 实现,可以很好的结合前端的一些自动化任务在里面,关注接口的同时也能同时处理其他事情,而且也很容易扩展,可以使用其他的后端模板,也可以使用其他插件来扩展前端任务。