安装好grunt后,苏南大叔下一步的计划就是配置Gruntfile.js这个配置文件。在这个文件中,苏南大叔采用的是一种比较简单易懂的方案。处理的文件目标是:把很多个分散的js文件,合并为一个all.min.js文件。这样做的好处是:可以有效的减少浏览器的并发数,加快网页浏览。

安装grunt构建工具

grunt构建工具的安装,是有些奇怪的。需要全局安装grunt-cli,然后本地安装grunt。本篇文章里面,不做详细描述。可以参考下面这个链接:

Gruntfile.js配置文件描述

下面对本文涉及的Gruntfile.js进行一下总结。

  • 共涉及两个插件grunt-contrib-uglifygrunt-contrib-concat。两者使用grunt.loadNpmTasks()定义的。
  • uglify任务(去掉了grunt-contrib-字样),负责把每个单独的js压缩(混淆)成多个.min.js文件。
  • concat任务里面,可以定义多个合并任务。这里就定义了一个分支任务js。在这个分支任务里面,通过src数组,顺序定义了已经压缩好的.min.js文件,最终合并得到了all.min.js文件。

苏南大叔:如何使用 grunt 插件压缩合并 js ?减少页面请求数的秘诀 - grunt-cmd
如何使用 grunt 插件压缩合并 js ?减少页面请求数的秘诀(图3-3)

使用方式

得到了最终的合并顺序可控的all.min.js文件后,就可以把页面内所有的js引用都删除掉,然后再只加载这个最终的all.min.js即可。
这个合并的得到的js,因为毕竟有js的路径变化。那么理论上来说,可能会发生附带资源的加载失败风险。所以,请记得测试后再使用。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   grunt    uglify

本站的忠实读者小伙伴,正在阅读下面这些文章: