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代码静态检查报告、单元