使用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