使用gulp进行项目构建--2
接下来介绍几个主要用到的插件:gulp-uglify > gulp-clean-css > gulp-concat > gulp-browserify > gulp-rename
一、gulp-uglify 主要用于压缩javascript文件,减小文件大小。
先为项目安装上gulp-uglify
修改gulpfile.js 引入gulp-uglify进行使用:
为了测试,在js文件夹下放一个js文件:
执行压缩js的任务:
二、gulp-clean-css 用于压缩css文件,减小文件大小
安装gulp-clean-css:
拿出一个css做测试:
修改gulpfile.js 引入css 并使用:
执行gulp 任务:
查看结果:
三、给css文件里引用url加版本号,可以有效避免浏览器缓存(下面只给使用方法,安装及验证自行完成):gulp-make-css-url-version
修改gulpfile.js 后执行:
注意:url中资源一定要存在项目中,不然要报错。
也可以使用日期做版本号:
四、使用gulp-concat合并javascript文件,减少网络请求。
五、使用gulp-browserify可以为浏览器编译遵循commonjs的模块,也就是用于合并模块。
搜索文件中的require()调用, 递归的建立模块依赖图。
browserify 的配置项中包含了insertGlobals和detectGlobals,其中insertGlobals用于跳过检测始终插入定义的processglobal__filename__dirname,如果确定不会用到这些全局变量就设置为 true 吧。detectGlobals用于检测当前代码中是否包含了上述的全局变量。如果代码中确定根本用不到那些全局变量设置这2个配置项能提升合并的性能。
六、使用 gulp-rename 修改文件名称。
任务执行后,到bulid文件夹中查看会发现css文件夹中有一个重命名后的test.js