Gulp 插件

前面咱們講到在學習壓縮 JS、CSS、圖片等文件時，須要用到一些相關的插件。Gulp 提供了一些有用的插件來處理 HTML 和 CSS，JavaScript，圖形以及一些其餘內容。下面咱們來看一下 gulp 中的一些不一樣類型插件。

HTML和CSS插件

插件	描述
autoprefixer	自動包含 CSS 屬性的前綴
gulp-browser-sync	用於監視 CSS 目錄中的全部 HTML 和 CSS 文件，並在文件更改時對全部瀏覽器中的頁面執行實時從新加載
gulp-useref	用於替換對非優化腳本或樣式表的引用
gulp-email-design	建立 HTML 電子郵件模板，將 CSS 樣式轉換爲內聯
gulp-uncss	優化 CSS 文件和查找未使用和重複的樣式
gulp-csso	是一個 CSS 優化器，能夠最小化 CSS 文件，從而縮小文件大小
gulp-htmlmin	最小化 HTML 文件
gulp-csscomb	用於製做 CSS 的樣式格式化程序
gulp-csslint	它指定一個 CSS linter
gulp-htmlhint	指定一個 HTML 驗證器

JavaScript插件

插件	描述
gulp-autopolyfiller	它與 autoprefixer 相同，包括 JavaScript 的必要 polyfill
gulp-jsfmt	用於搜索特定的代碼段
gulp-jscs	用於檢查 JavaScript 代碼樣式
gulp-modernizr	指定了用戶瀏覽器提供的 HTML，CSS 和 JavaScript 功能
gulp-express	啓動了gulp express.js 網絡服務器
gulp-requirejs	使用 require. js 將 require.js AMD 模塊組合成一個文件
gulp-plato	生成複雜性分析報告
gulp-complexity	分析了代碼的複雜性和可維護性
fixmyjs	修復了 JSHint 的結果
gulp-jscpd	用做源代碼的複製/粘貼檢測器
gulp-jsonlint	是 JSON 驗證器
gulp-uglify	縮小了 JavaScript 文件
gulp-concat	鏈接 CSS 文件

單元測試插件

插件	描述
gulp-nodeunit	運行 Gulp 的節點單元測試
gulp-jasmine	用於報告與輸出相關的問題
gulp-qunit	爲 QUnit 測試提供基本的控制檯輸出，並使用 PhantomJS 節點模塊和 PhantomJS 運行器 QUnit 插件
gulp-mocha	指定了 Mocha 周圍的薄包裝並運行 Mocha 測試
gulp-karma	已在 Gulp 中棄用

圖形插件

插件	描述
gulpicon	從 SVG 生成精靈並將它們轉換爲 PNG
gulp-iconfont	與 Web 字體一塊兒用於從 SVG 建立 WOFF，EOT，TTF 文件
gulp-imacss	將圖像文件轉換爲數據 URI 並將它們放入單個 CSS 文件中
gulp-responsive	爲不一樣的設備生成響應式圖像
gulp-sharp	它用於更改和調整圖像的方向和背景
gulp-svgstore	將 SVG 文件與元素組合成一個文件
gulp-imagemin&gulp-tinypng	用於壓縮 PNG，JPEG，GIF，SVG 等圖像
gulp-spritesmith	用於從一組圖像和 CSS 變量建立 spritesheet

編譯器插件

插件	描述
gulp-less	爲 Gulp 提供了少許插件
gulp-sass	爲 Gulp 提供 SASS 插件
gulp-compass	爲 Gulp 提供指南針插件
gulp-stylus	用於將手寫筆保存在 CSS 中
gulp-coffee	爲 Gulp 提供 coffeescript 插件
gulp-handlebars	爲 Gulp 提供了把手插件
gulp-jst	在 JST 中提供下劃線模板
gulp-react	將 Facebook React JSX 模板指定爲 JavaScript
gulp-nunjucks	在 JST 中指定 Nunjucks 模板
gulp- dustjs	在 JST 中指定了 Dust 模板
gulp-angular-templatecache	在 templateCache 中指定 AngularJS 模板

其餘插件

gulp-clean 插件刪除文件和文件夾，gulp-copy 插件將文件從源文件複製到新目的地。

插件	描述
gulp-grunt	從 Gulp 運行 Grunt 任務
gulp-watch	不管什麼時候進行更改，它都會監視文件
gulp-notify	只要任務失敗，它就會通知錯誤消息
gulp-git	它容許使用 Git 命令.
gulp-jsdoc	爲 Gulp 建立 JavaScript 文檔
gulp-rev	它提供對文件名的靜態資產修訂
gulp-bump	增長了 JSON 包中的版本
gulp-bower-files	用於注入涼亭包
gulp-removelogs	刪除了 console.log 語句
gulp-preprocess	根據上下文或環境配置預處理 HTML，JavaScript 和其餘文件
gulp-connect	它用於運行 LiveReload 的 Web 服務器
gulp-shell	運行 Shell 命令
gulp-ssh	使用 SSH 和 SFTP 任務進行鏈接
gulp-zip	它壓縮文件和文件夾
gulp-util	爲 gulp 插件提供實用工具
gulp-filesize	它以人類可讀的格式指定文件大小