基于 Grunt 的前端构建

[cobish]

目录结构

建议： 构建生成的 dist 目录不需要放入版本控制中。

跟以往的前端目录不同，这里将前端的资源代码都放入了一个 src 目录下，作为开发目录。依赖构建工具生成的 dist 目录则是处理后的前端资源代码。

├─ src/                   # 开发目录
    ├─ html/              # 存放html的目录
        ├─ app/           # 可提取复用的页面模块
        └─ page/          # 各页面入口文件
    ├─ images/            # 存放图片的目录
        ├─ single/        # 不需要合并的图片
        └─ sprite/        # 需要合并的图片
    ├─ js/                # 存放js的目录
        ├─ app/           # 可提取复用的脚步模块
        ├─ lib/           # 第三方js库
        ├─ page/          # 各页面入口脚本文件
        └─ config.js      # RequireJs的配置文件
    └─ sass/              # 存放sass的目录
        ├─ app/           # 可提取复用的样式模块
        └─ page/          # 各页面入口样式文件
├─ Gruntfile.js           # Grunt配置文件
└─ package.json           # npm包管理文件

构建目标

• 图片合并、压缩、hash 戳；
• css 文件 sass 编译、合并、压缩、替换已 hash 的图片资源、hash 戳；
• js 文件合并、压缩、RequireJs打包、hash 戳；
• html 文件依赖合并、替换已 hash 的静态资源。

开发阶段

在开发的阶段，使用到的是以下代码：

// 开发使用
grunt.registerTask('dev', [
    'clean:dist',
    'clean:tmp',
    'sass:dev',
    'includereplace:dev',
    'jshint',
    'copy:js',
    'copy:images',
    'watch'
]);

先将最终目录 dist 和 临时目录 tmp 删除，防止与之前构建的代码混合。然后需要编译 sass 代码，合并依赖的 html 代码，js 检错与复制，图片的复制，最后是代码的监听。最终将代码构建到 dist 目录下，当前该目录下的代码是未进行合并压缩的，方便调试。

其中 watch 执行后会监听必要的文件，比如 sass 代码改动会自动执行 sass 编译，js 代码改动会自动执行 jshint 和 复制 js 代码。在这一阶段不需要去考虑过多的事情，文件都不需要合并压缩，可以让开发者专心地开发功能。

上线打包阶段

参考： 张云龙的「大公司里怎样开发和部署前端代码？」。

第一个步骤主要是对图片进行处理，包括图片合并压缩 hash 戳等。其中对 css 代码处理是为了替换合并后的图片路径。

// 步骤一：对图片进行打包
grunt.registerTask('img', [
    'clean:dist',
    'clean:tmp',
    'sass:tmp',
    'copy:tmpImages',
    'sprite',
    'imagemin',
    'filerev:img'
]);

第二个步骤主要是对 css 文件进行处理，其中还包括替换已经 hash 的图片资源，并生成 hash 戳。

// 步骤二：对css进行打包
grunt.registerTask('css', [
    'usemin:css',
    'sass:dist',
    'filerev:css'
]);

第三个步骤是 js 文件的打包，打包 RequireJs 代码可以根据依赖进行 js 文件的合并压缩，最终每个页面都打包一个 js 文件为单入口。

// 步骤三：对js进行打包
grunt.registerTask('js', [
    'requirejs',
    'usemin:js',
    'filerev:js',
    'copy:libJs'
]);

第四个步骤是 html 文件的打包，替换掉前面已经 hash 的静态资源即可。

// 步骤三：对html进行打包
grunt.registerTask('html', [
    'includereplace',
    'usemin:html',
    'clean:tmp'
]);

最终生成的代码依然在 dist 目录下，也就是说在开发阶段与上线打包阶段构建生成的代码都在同一个目录下，只不过在开发阶段代码是未进行合并压缩，上线打包阶段代码是经过合并压缩打上 hash 戳的。所以建议该目录下的代码不需要添加到版本控制中。

未解决的问题

开发阶段

• 图片改动后需重新执行 grunt dev 命令才能使用，即不能监听新加入的文件；
• 对 RequireJs 的路径配置（config.js 与 Grunt 中的配置）感到困惑迷糊。

上线打包阶段

• RequireJS 若添加新的模块或第三方库，需要手动修改 Grunt 代码；
• 无法将构建图片样式脚本页面的任务合并成一个任务执行，需分成四个小项目执行，不然 usemin 不起作用，无法替换已 hash 的静态文件。即下面的任务是无效的：

grunt.registerTask('build', [
    'img',
    'css',
    'js',
    'html'
]);