Gulp - 實用外掛

Gulp 提供了一些實用的外掛來處理 HTML & CSS、JavaScript、圖形和其他一些內容，如下表所示。

HTML & CSS 外掛

序號	外掛及描述
1	autoprefixer 它自動為 CSS 屬性新增字首。
2	gulp-browser-sync 它用於監視 CSS 目錄中的所有 HTML 和 CSS 檔案，並在檔案更改時對所有瀏覽器中的頁面執行即時過載。
3	gulp-useref 它用於替換對未最佳化的指令碼或樣式表的引用。
4	gulp-email-design 它建立 HTML 郵件模板，並將 CSS 樣式轉換為內聯樣式。
5	gulp-uncss 它最佳化 CSS 檔案，並查詢未使用的和重複的樣式。
6	gulp-csso 它是一個 CSS 最佳化器，可以最小化 CSS 檔案，從而減小檔案大小。
7	gulp-htmlmin 它最小化 HTML 檔案。
8	gulp-csscomb 它用於建立 CSS 樣式格式化程式。
9	gulp-csslint 它指定一個 CSS 程式碼檢查工具。
10	gulp-htmlhint 它指定一個 HTML 驗證器。

JavaScript 外掛

序號	外掛及描述
1	gulp-autopolyfiller 它類似於 autoprefixer，它包含 JavaScript 所需的 polyfills。
2	gulp-jsfmt 它用於搜尋特定的程式碼片段。
3	gulp-jscs 它用於檢查 JavaScript 程式碼風格。
4	gulp-modernizr 它指定使用者瀏覽器支援哪些 HTML、CSS 和 JavaScript 功能。
5	gulp-express 它啟動 gulp express.js web 伺服器。
6	gulp-requirejs 它使用 require.js 將 require.js AMD 模組組合到一個檔案中。
7	gulp-plato 它生成複雜度分析報告。
8	gulp-complexity 它分析程式碼的複雜性和可維護性。
9	fixmyjs 它修復 JSHint 結果。
10	gulp-jscpd 它用作原始碼的複製/貼上檢測器。
11	gulp-jsonlint 它是 JSON 驗證器。
12	gulp-uglify 它壓縮 JavaScript 檔案。
13	gulp-concat 它連線 CSS 檔案。

單元測試外掛

序號	外掛及描述
1	gulp-nodeunit 它從 Gulp 執行 Node 單元測試。
2	gulp-jasmine 它用於報告與輸出相關的問題。
3	gulp-qunit 它為 QUnit 測試提供基本的控制檯輸出，並使用 PhantomJS node 模組和 PhantomJS 執行器 QUnit 外掛。
4	gulp-mocha 它指定 Mocha 的薄包裝器並執行 Mocha 測試。
5	gulp-karma 它在 Gulp 中已被棄用。

圖形外掛

序號	外掛及描述
1	gulpicon 它從 SVG 生成精靈圖並將其轉換為 PNG。
2	gulp-iconfont 它與 web 字型一起使用，從 SVG 建立 WOFF、EOT、TTF 檔案。
3	gulp-imacss 它將影像檔案轉換為 data URI 並將它們放入單個 CSS 檔案中。
4	gulp-responsive 它為不同的裝置生成響應式影像。
5	gulp-sharp 它用於更改和調整影像的方向和背景。
6	gulp-svgstore 它將 SVG 檔案組合成一個帶有 <symbol> 元素的檔案。
7	gulp-imagemin & gulp-tinypng 它用於壓縮影像，例如 PNG、JPEG、GIF、SVG。
8	gulp-spritesmith 它用於根據一組影像和 CSS 變數建立雪碧圖。

編譯器外掛

序號	外掛及描述
1	gulp-less 它為 Gulp 提供 LESS 外掛。
2	gulp-sass 它為 Gulp 提供 SASS 外掛。
3	gulp-compass 它為 Gulp 提供 compass 外掛。
4	gulp-stylus 它用於在 CSS 中使用 stylus。
5	gulp-coffee 它為 Gulp 提供 coffeescript 外掛。
6	gulp-handlebars 它為 Gulp 提供 handlebars 外掛。
7	gulp-jst 它在 JST 中提供下劃線模板。
8	gulp-react 它將 Facebook React JSX 模板指定為 JavaScript。
9	gulp-nunjucks 它在 JST 中指定 Nunjucks 模板。
10	gulp-dustjs 它在 JST 中指定 Dust 模板。
11	gulp-angular-templatecache 它在 templateCache 中指定 AngularJS 模板。

其他外掛

gulp-clean 外掛刪除檔案和資料夾，gulp-copy 外掛將檔案從源複製到新目標。

序號	外掛及描述
1	gulp-grunt 它從 Gulp 執行 Grunt 任務。
2	gulp-watch 它在檔案更改時監視檔案。
3	gulp-notify 任務失敗時，它會通知錯誤訊息。
4	gulp-git 它允許使用 Git 命令。
5	gulp-jsdoc 它為 Gulp 建立 JavaScript 文件。
6	gulp-rev 它為檔名提供靜態資源版本控制。
7	gulp-bump 它增加 JSON 包中的版本號。
8	gulp-bower-files 它用於注入 bower 包。
9	gulp-removelogs 它刪除 console.log 語句。
10	gulp-preprocess 它根據上下文或環境配置預處理 HTML、JavaScript 和其他檔案。
11	gulp-duration 它指定 Gulp 任務的持續時間。
12	gulp-changed & gulp-newer 它執行已修改的檔案和較新的檔案。
13	gulp-connect 它用於執行帶有 LiveReload 的 web 伺服器。
14	gulp-shell 它執行 Shell 命令。
15	gulp-ssh 它使用 SSH 和 SFTP 任務進行連線。
16	gulp-zip 它壓縮檔案和資料夾。
17	gulp-clean & gulp-copy
18	gulp-filesize 它以人類可讀的格式指定檔案大小。
19	gulp-util 它為 gulp 外掛提供實用程式。

列印頁面

廣告