gulp常用插件匯總:
點擊插件名字,查看使用文檔
browser-sync: 省時的瀏覽器同步測試工具,多設備、多屏幕自動刷新頁面
http-proxy-middleware : 解決本地開發代理跨域請求插件
autoprefixer: 根據定制的兼容規則給css添加瀏覽器前綴插件
wiredep: wiredep解決了bower前端庫引入進html中的問題
del: 刪除文件及文件夾
yargs: Node中處理命令行參數的通用解決方案,只要一句代碼 var args = require('yargs').argv;就可以讓命令行的參數都放在變量args上,可以根據參數判斷是測試環境還是正式環境。
gulp-load-plugins: 批量引入package.json文件中的依賴項
gulp-plumber: 防止因gulp插件的錯誤而導致管道中斷,plumber可以阻止 gulp 插件發生錯誤導致進程退出並輸出錯誤日志。
gulp-notify:gulp通知插件
gulp-sourcemaps: 用來生成映射文件的一個插件,SourceMap 文件記錄了一個存儲源代碼與編譯代碼對應位置映射的信息文件。我們在調試時都是沒辦法像調試源碼般輕松,這就需要 SourceMap 幫助我們在控制台中轉換成源碼,從而進行 debug。
gulp-useref: 可以將HTML引用的多個CSS和JS合並起來,減小依賴的文件個數,從而減少瀏覽器發起的請求次數。gulp-useref根據注釋將HTML中需要合並壓縮的區塊找出來,對區塊內的所有文件進行合並。注意:它只負責合並,不負責壓縮!
gulp-rev:為靜態文件隨機添加一串hash值, 解決cdn緩存問題, a.css --> a-d2f3f35d3.css。根據靜態資源內容,生成md5簽名,打包出來的文件名會加上md5簽名,同時生成一個json用來保存文件名路徑對應關系。
gulp-rev-collector:根據gulp-rev生成的manifest.json文件中的映射, 去替換文件名稱, 也可以替換路徑。
gulp-rev-rewrite:重寫對由gulp-rev修訂的資產的引用
gulp-rev-css-url:用於在gulp-rev之后,用修訂后的URL覆蓋CSS文件中的URL
gulp-rev-outdated:舊的靜態資產修訂文件過濾器
gulp-rev-delete-original:刪除由gulp-rev或 gulp-rev-all重寫的原始文件 。
rev-del:這是一款從模塊(如gulp-rev)生成的修訂清單中刪除舊的、未使用的指紋文件。
gulp-rev-format:提供靜態資產的哈希格式選項(前綴,后綴,最后擴展名)
gulp-imagemin: 縮小PNG,JPEG,GIF和SVG圖像的插件
gulp-cache:這是一款基於臨時文件的gulp緩存代理任務。
gulp-filter: 可以把stream里的文件根據一定的規則進行篩選過濾。比如gulp.src中傳入匹配符匹配了很多文件,可以把這些文件pipe給gulp-filter作二次篩選
gulp-inject:這個插件的作用與wiredep類似,不同的是可以自己任意指定需要插入文件的列表。它同樣是利用注釋來尋找插入的位置。
gulp-replace:gulp3的字符串替換插件
gulp-htmlmin:這是一款HTML文件壓縮插件
gulp-if:這是一款條件判斷插件
gulp-size:顯示項目的大小插件
gulp-uglify:使用UglifyJS縮小js文件
gulp-beautify:這是一款使用js-beautify進行資產美化插件
pump:這是一款小型節點模塊,可將流連接在一起並在其中一個關閉時將其全部銷毀
gulp-postcss:通過多個插件通過管道傳遞CSS,但是僅解析一次CSS。
cssnano:這是一款將你的 CSS 文件做 多方面的的優化,以確保最終生成的文件 對生產環境來說體積是最小的插件
gulp-babel:Babel的Gulp插件
gulp-eslint:一個用於識別和報告在ECMAScript/JavaScript代碼中找到的模式的Gulp插件。
