Gulp常用插件

1》gulp-load-plugins 自动加载插件

先安装npm install gulp-load-plugins --save-dev，然后用require把插件加载进去

如果我们使用的插件非常多，那么在gulpfile.js文件开头就会有很多插件引入的代码，但是这使得gulpfile.js文件非常冗长，他正是解决这个问题。

var plugins=require（“gulp-load-plugins”）;

plugins.rename=require(“gulp-rename”);

gulp-load-plugins并不会一开始就加载所有的package.json里的gulp插件，而是在我们需要用到某个插件的时候，才回去加载。而且因为gulp-load-plugins是通过package.json文件来加载插件的，所以必须保证你需要自动加载的插件已经写入到package.json文件里，并且这些插件都已经安装好了。

2》del 删除文件（gulp-clean）

3》gulp-rename重命名

先npm安装，用来重命名文件流中的文件，在写入文件前可以使用这个插件来改变文件名

4》gulp-uglify     js文件压缩    先npm安装

5》gulp-cssnano（gulp-minify-css 以及废除）    css文件压缩   先npm安装

6》gulp-minify-html   html文件压缩  先npm安装

7》gulp-jshint    js代码检测    先npm安装

8》gulp-concat 文件压缩   先npm安装

可以把多个文件合并为一个文件，我们可以用它来合并js或css文件，可以减少http请求

9》gulp-less和gulp-sass   less和sass的编译

10》gulp-imagemin  图片压缩 先npm安装（使用比较复杂，他本身也有插件）

可以压缩jpg，png，gif等图片

11》gulp-livereload自动刷新   先npm安装

当代码变化时，可以帮我们自动刷新页面（最好配合谷歌浏览器使用）

12》browser-sync

它能够监测文件的改动并自动刷新页面尤其是做移动端的响应式开发的时候

13》gulp-plumber gulp错误处理，可以防止gulp插件发生错误导致进程退出并输出错误日志

14》gulp-postcss和autoprefixer  根据浏览器版本自动处理浏览器前缀，不必考虑css针对浏览器的兼容问题（特别是开发移动端页面的时候）

postcss把扩展的语法和特性转换成现代的浏览器友好的CSS

15》gulp-zip  zip压缩文件

 

 

gulp-cache  图片快取，只有更改过得图片会进行压缩

gulp-if 用于判断

gulp-size 统计管道里面内容的大小的,上面是用它来显示出压缩前后的大小用来对比用

gulp-sourcemaps 当压缩的JS出错，能根据这个找到未压缩代码的位置 不会一片混乱代码

gulp-useref 将html引用顺序的CSS JS 变成一个文件  

gulp-rev-append html引用添加版本号

main-bower-files 找到bower.json里配置的 overrides 下配置的main下的路径

wiredep 在.html文件会把默认bower.json的配置自动注入到下面标签中去