常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

_winds

　　前两篇文章讨论了 Gulp 的安装部署及基本概念，借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务。本文主要汇总常用的 Gulp 插件及其基本使用，需要读者对 Gulp 有一个基本的了解。如果你对 Gulp 还不是很了解，可以通过下面两篇文章快速了解 Gulp 。
　　由于几乎所有的插件都有非常友好的使用文档，所以本文不讨论涉及插件使用的东西，仅是一个汇总、排名不分先后。

　　相关连接导航
　　在windows下安装gulp —— 基于 Gulp 的前端集成解决方案（一）
　　执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案（二）
　　常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）
　　构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

插件安装
　　gulp 插件基于 nodejs ，安装一个Gulp 插件和安装普通 Nodejs 包的方法是一样的。只需 $npm --save-dev install 插件名 就可以完成安装。
1、gulp-sass
　　预编译 sass 文件为 css 文件，SASS 不多说，如果项目中有使用 sass ，那么这个插件应该是必备的。前面的一篇文章中，已经对该插件有所使用了，可配置编译后输出风格、是否输出sourcemap 等常用选项。类似的项目还有 gulp-scss / gulp-sassdoc / compass
　　安装： $npm install --save-dev gulp-sass
　　文档：https://www.npmjs.com/package/gulp-sass/
　　2、browser-sync
　　保持多浏览器、多设备同步、在前端开发是非常有用，可谓是必备组件。
　　安装：npm install browser-sync
　　文档：http://www.browsersync.io
　　3、gulp-imagemin
　　压缩 png/jpg/git/svg 格式图片文件
　　安装：$ npm install --save-dev gulp-imagemin
　　文档：github.com/sindresorhus/gulp-imagemin
　　4、gulp-gzip
　　Gzip 插件
　　安装：npm install gulp-gzip
　　文档：github.com/jstuckey/gulp-gzip
　　5、gulp-inject
　　一个 js/css/webComponet注入插件，browser-sync里面继承了该组件，如果使用browser-sync就不必要再单独安装gulp-inject了
　　安装：npm install gulp-inject
　　文档：github.com/klei/gulp-inject
　　6、gulp-markdown
　　markdown 不用多说，这个基本上都要用到。
　　安装：npm install gulp-markdown
　　文档：github.com/sindresorhus/gulp-markdown
　　7、gulp-plumber
　　错误处理插件，如果不希望总是因为错误而中断任务的话，那么它几乎是必备组件。
　　安装：npm install gulp-plumber
　　文档：github.com/floatdrop/gulp-plumber
　　8、gulp-minify-css
　　压缩CSS文件，几乎也是必备
　　安装：npm install gulp-minify-css
　　文档：github.com/murphydanger/gulp-minify-css
　　9、gulp-rename
　　重命名文件的插件，当要把一个文件存储为不同版本时可以使用。比如在需要一个style.css同时你有需要一个style.min.css
　　安装：npm install gulp-rename
　　文档：github.com/hparra/gulp-rename
　　10、gulp-concat
　　顾名思义，用来整合文件用的。很常用
　　安装：npm install gulp-concat
　　文档：github.com/wearefractal/gulp-concat
写在最后
　　本文将持续更新，以收录一些非常有趣或常用的gulp插件。
　　关于本文如果您有任何建议或疑问请在下面留言交流，也可通过 Web前端高级工程师 群进行线上沟通。