Web前端持续集成方案（一）

一、引言

    前端项目从开发到部署上线，中间通常要做一些额外的处理。比如代码压缩、合并、css预编译、宏替换等。对于一个成熟的项目，这些通常都是通过脚本自动完成的。本文结合项目实践，介绍grunt在web前端持续集成中的应用。

 

二、项目工程化

    1、开发一个项目前，首先需要制定项目的文档结构。一个结构合理、层次清晰的文档结构更有利于团队成员间的协作。我们的项目结构如下图所示：

        dist：存放最终打包好的项目文件。可直接部署到服务器中。

        node_modules：存放node模块文件。

        report：存放项目的检测报告。

        router：存放php等服务端脚本。 

        script：存放项目的js脚本。业务逻辑代码都放在这里。

        test：存放单元测试文件。

        theme：存放样式文件、字体文件。

        view：存放html、php等文件。

        配置文件一般放在根目录下。

    2、dist目录

    dist目录只保存项目发布所必需的所有文件。基本上对应着开发目录中的文件结构。如下图所示：

    3、report目录

    report目录保存项目有关的统计报表，包括覆盖率报告、代码风格检查报告、js代码静态检查报告、单元测试报告。如下图所示：

    4、script目录

    script目录保存项目的业务代码。由于我们的项目采用seajs模块化开发，所以script目录也按照一个模块一个目录的形式存放。业务代码都放在script/module目录下，通用代码、第三方代码一般放在script\common目录下。每个模块的模板文件放在该模块目录的tpl子目录下。如下图所示：

    5、test目录

    test目录保存单元测试代码，基本上与script目录结构一致。如下图所示：

    6、theme目录

    theme目录保存项目的样式、字体、图片等文件，按风格存放。如下图所示：

    7、view目录

    view目录存放项目的html、php文件。如下图所示：