Grunt使用技巧

使用Grunt已经有一段时间了,最近做的好几个项目都用到了Grunt,它不仅改善了前端开发流程,也让前端代码发布轻松了许多。本文将不会介绍Grunt基础,而是介绍一些Grunt的使用技巧。

  1. 安装grunt-cli一定要使用管理员权限。
  2. grunt运行完整命令为grunt [–gruntfile *.js] [][task:target],如果你的grunt基本配置文件不是Gruntfile.js,运行命令行时请加上–gruntfile参数,后面跟其它js配置文件。默认下直接运行grunt会执行grunt default,如果你想直接运行某个任务(集),请执行grunt task(s)。如果具体到某个目标,请运行grunt task:target。
  3. 可使用grunt-init或yoman来生成Gruntfile.js骨架,grunt-init要下载相应的模板并安装在相应的路径下,以Windows 7系统为例,模板应该放置%USERPROFILE%\.grunt-init\中。
  4. 如果加载模块很多,grunt.loadNpmTasks部分会非常冗长。建议安装load-grunt-tasks模块,然后在Gruntfile.js文件中,用require(‘load-grunt-tasks’)(grunt)替代所有的grunt.loadNpmTasks语句。Grunt便可以自动分析package.json文件,自动加载所找到的grunt模块。
  5. 图片压缩插件imagemin的效果不怎么好,建议还是用图形处理软件如Photoshop来搞定。
  6. 使用压缩混淆插件uglify处理jQuery代码后,在IE8下跑起来,可设置screwIE8: false来解决这一问题。设置 mangle: { except: [‘jQuery’] }是没有用的。
  7. 如果你的Web应用是多页面的,使用concat 、uglify 、cssmin相应处理后要在第个页面替换原来的css、js资源资源路径是很麻烦的。一个好办法就是使用grunt-usemin来解决这一问题,该插件整合了concat 、uglify 、cssmin的功能,而且通过在页面注解的方式自动替换静态资源url的配置,可大大减轻多页面需要手动配置的工作量。结合使用Grunt动态构建文件对象进行配置,可做到少修改配置,以不变应万变。
  8. 针对SPA页面,grunt-usemin插件如果要合并压缩混淆模板页面中的静态资源文件,可以设置useminPrepare的root选项等于 index.html所在的目录。
  9. 如果发布时要让页面缓存失效,最好的办法是使用grunt-filerev来修改文件名。Grunt根据文件内容在文件名前随机加入 md5 字符串。如果文件内容内容变了,md5 字符串会相应改变,反之不会改变md5 字符串。这样就保证了新版发布后,更改过的页面url与上次发布不同,因此用户看到的页面肯定是新的。另外一种常用的方是在静态资源文件后加上一个版本参数,不过这样会强制刷新页面,即使该页面没有被更新过。显然使用grunt-usemin插件是更好的解决方案。

gitLab相应链接:https://github.com/szriafan/grunt-tips

发表评论