接下来介绍几个主要用到的插件:gulp-uglify > gulp-clean-css > gulp-concat > gulp-browserify > gulp-rename
一、gulp-uglify 主要用于压缩javascript文件,减小文件大小。
先为项目安装上gulp-uglify
![7110579-b0e06ab0e3d192f2.png](https://i-blog.csdnimg.cn/blog_migrate/62bc43fd0f5c46817c445b84d1735b9d.png)
修改gulpfile.js 引入gulp-uglify进行使用:
![7110579-3a595fa78f93c520.png](https://i-blog.csdnimg.cn/blog_migrate/a02325bab6bffb1b9e5cc9dc35a32178.png)
为了测试,在js文件夹下放一个js文件:
![7110579-abfbf5be86238590.png](https://i-blog.csdnimg.cn/blog_migrate/95aeccfc6db193be24e941f4fe9e0d18.png)
执行压缩js的任务:
![7110579-cbded9db323693d0.png](https://i-blog.csdnimg.cn/blog_migrate/2091abfd506493c359d7954f476907f8.png)
二、gulp-clean-css 用于压缩css文件,减小文件大小
安装gulp-clean-css:
![7110579-899463d5c15bb913.png](https://i-blog.csdnimg.cn/blog_migrate/5e4d98c30d3b2afdff14362c70bef369.png)
拿出一个css做测试:
![7110579-cb93a0435b11ec53.png](https://i-blog.csdnimg.cn/blog_migrate/c9a7fc4bcbd8b597c6ee326f29d85628.png)
修改gulpfile.js 引入css 并使用:
![7110579-21687ef39c13de77.png](https://i-blog.csdnimg.cn/blog_migrate/b92bcdc1779bd4a66d71ead1bd27d80c.png)
执行gulp 任务:
![7110579-72ba6266e83aeefe.png](https://i-blog.csdnimg.cn/blog_migrate/7d69bf243c65c728ba1809a401d9eb89.png)
查看结果:
![7110579-eb15c54411cd3abb.png](https://i-blog.csdnimg.cn/blog_migrate/6db825f660ee816e4a4097ba15e59b64.png)
三、给css文件里引用url加版本号,可以有效避免浏览器缓存(下面只给使用方法,安装及验证自行完成):gulp-make-css-url-version
修改gulpfile.js 后执行:
注意:url中资源一定要存在项目中,不然要报错。
![7110579-4ac28a5c52ef43ea.png](https://i-blog.csdnimg.cn/blog_migrate/cb694c44c0259dfeb099dd0aed8bf9e4.png)
也可以使用日期做版本号:
![7110579-b4e2537e0fa8604b.png](https://i-blog.csdnimg.cn/blog_migrate/83c719cdf944c48009b15839c632718a.png)
四、使用gulp-concat合并javascript文件,减少网络请求。
![7110579-fc62945cee6be4fa.png](https://i-blog.csdnimg.cn/blog_migrate/54abe957fba561544afe160c2c9b453d.png)
五、使用gulp-browserify可以为浏览器编译遵循commonjs的模块,也就是用于合并模块。
![7110579-2ecc9038b21dc1bc.png](https://i-blog.csdnimg.cn/blog_migrate/d01ac3c8c969b92cd433d5a304d8cf71.png)
browserify 的配置项中包含了insertGlobals和detectGlobals,其中insertGlobals用于跳过检测始终插入定义的processglobal__filename__dirname,如果确定不会用到这些全局变量就设置为 true 吧。detectGlobals用于检测当前代码中是否包含了上述的全局变量。如果代码中确定根本用不到那些全局变量设置这2个配置项能提升合并的性能。
六、使用 gulp-rename 修改文件名称。
![7110579-dfa63ead42571603.png](https://i-blog.csdnimg.cn/blog_migrate/c00d9e9c6a736848652790ae7a2dfb2a.png)