經常使用 Gulp 插件彙總 —— 基於 Gulp 的前端集成解決方案（三）

前兩篇文章討論了 Gulp 的安裝部署及基本概念，藉助於 Gulp 強大的 插件生態 能夠完成不少常見的和不常見的任務。本文主要彙總經常使用的 Gulp 插件及其基本使用，須要讀者對 Gulp 有一個基本的瞭解。若是你對 Gulp 還不是很瞭解，能夠經過下面兩篇文章快速瞭解 Gulp 。

因爲幾乎全部的插件都有很是友好的使用文檔，因此本文不討論涉及插件使用的東西，僅是一個彙總、排名不分前後。

 

相關鏈接導航

在windows下安裝gulp —— 基於 Gulp 的前端集成解決方案（一）

執行 $Gulp 時發生了什麼 —— 基於 Gulp 的前端集成解決方案（二）

經常使用 Gulp 插件彙總 —— 基於 Gulp 的前端集成解決方案（三）

構建一個基本的前端自動化開發環境 —— 基於 Gulp 的前端集成解決方案（四）

插件安裝

gulp 插件基於 nodejs ，安裝一個Gulp 插件和安裝普通 Nodejs 包的方法是同樣的。只需  $npm --save-dev install 插件名  就能夠完成安裝。

一、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/

二、browser-sync

保持多瀏覽器、多設備同步、在前端開發是很是有用，可謂是必備組件。

安裝：npm install browser-sync

文檔：http://www.browsersync.io

三、gulp-imagemin

壓縮 png/jpg/git/svg 格式圖片文件

安裝：$ npm install --save-dev gulp-imagemin

文檔：github.com/sindresorhus/gulp-imagemin

四、gulp-gzip

Gzip 插件

安裝：npm install gulp-gzip

文檔：github.com/jstuckey/gulp-gzip

五、gulp-inject

一個 js/css/webComponet注入插件，browser-sync裏面繼承了該組件，若是使用browser-sync就沒必要要再單獨安裝gulp-inject了

安裝：npm install gulp-inject

文檔：github.com/klei/gulp-inject

六、gulp-markdown

markdown 不用多說，這個基本上都要用到。

安裝：npm install gulp-markdown

文檔：github.com/sindresorhus/gulp-markdown

七、gulp-plumber

錯誤處理插件，若是不但願老是由於錯誤而中斷任務的話，那麼它幾乎是必備組件。

安裝：npm install gulp-plumber

文檔：github.com/floatdrop/gulp-plumber

八、gulp-minify-css

壓縮CSS文件，幾乎也是必備

安裝：npm install gulp-minify-css

文檔：github.com/murphydanger/gulp-minify-css

九、gulp-rename

重命名文件的插件，當要把一個文件存儲爲不一樣版本時能夠使用。好比在須要一個style.css同時你有須要一個style.min.css

安裝：npm install gulp-rename

文檔：github.com/hparra/gulp-rename

十、gulp-concat

顧名思義，用來整合文件用的。很經常使用

安裝：npm install gulp-concat

文檔：github.com/wearefractal/gulp-concat

寫在最後

本文將持續更新，以收錄一些很是有趣或經常使用的gulp插件。