Grunt 使用技巧

使用 Grunt 已经有一段时间了，最近做的好几个项目都用到了 Grunt，它不仅改善了前端开发流程，也让前端代码发布轻松了许多。本文将不会介绍 Grunt 基础，而是介绍一些 Grunt 的使用技巧。刚好和小伙伴们做了一次内部分享，一起来了解一下吧！

管理员权限

安装 grunt-cli 一定要使用管理员权限。

Grunt 运行完整命令

Grunt 运行完整命令为 grunt [--gruntfile *.js] [task:target]，如果你的 grunt 基本配置文件不是 Gruntfile.js，运行命令行时请加上--gruntfile 参数，后面跟其它 JavaScript 配置文件。默认下直接运行 grunt 会执行 grunt default，如果你想直接运行某个任务（集），请执行 grunt task(s)。如果具体到某个目标，请运行 grunt task:target。

使用 grunt-init

可使用 grunt-init 或 yoman 来生成 Gruntfile.js 骨架，grunt-init 要下载相应的模板并安装在相应的路径下，以 Windows 7 系统为例，模板应该放置%USERPROFILE%\.grunt-init\ 中。

使用 load-grunt-tasks

如果加载模块很多，grunt.loadNpmTasks 部分会非常冗长。建议安装 load-grunt-tasks 模块，然后在 Gruntfile.js 文件中，用 require('load-grunt-tasks')(grunt) 替代所有的 grunt.loadNpmTasks 语句。Grunt 便可以自动分析 package.json 文件，自动加载所找到的 Grunt 模块。

使用 imagemin

图片压缩插件 imagemin 的效果不怎么好，建议还是用图形处理软件如 Photoshop 来搞定。

使用 uglify

使用压缩混淆插件 uglify 处理 jQuery 代码后，在 IE8 下跑起来，可设置 screwIE8: false 来解决这一问题。设置 mangle: { except: ['jQuery'] } 是没有用的。

使用 grunt-usemin

如果你的 Web 应用是多页面的，使用 concat 、uglify 、CSSmin 相应处理后要在第个页面替换原来的 CSS 和 JavaScript 资源资源路径是很麻烦的。一个好办法就是使用 grunt-usemin 来解决这一问题，该插件整合了 concat 、uglify、cssmin 的功能，而且通过在页面注解的方式自动替换静态资源 url 的配置，可大大减轻多页面需要手动配置的工作量。结合使用 Grunt 动态构建文件对象进行配置，可做到少修改配置，以不变应万变。

针对单页面应用（SPA），grunt-usemin 插件如果要合并压缩混淆模板页面中的静态资源文件，可以设置 useminPrepare 的 root 选项等于 index.html 所在的目录。

使用 grunt-filerev

如果发布时要让页面缓存失效，最好的办法是使用 grunt-filerev 来修改文件名。Grunt 根据文件内容在文件名前随机加入 md5 字符串。如果文件内容内容变了，md5 字符串会相应改变，反之不会改变 md5 字符串。这样就保证了新版发布后，更改过的页面 url 与上次发布不同，因此用户看到的页面肯定是新的。另外一种常用的方是在静态资源文件后加上一个版本参数，不过这样会强制刷新页面，即使该页面没有被更新过。显然使用 grunt-filerev 插件是更好的解决方案。