使用 Gulp 進行 JavaScript 自動化簡介

作為 Web 開發人員，我們有時會發現自己一次又一次地重複同樣乏味的任務。 如果您考慮在瀏覽器上運行構建命令或點擊刷新會浪費多少時間，您會意識到可以節省大量時間。 此外，通過自動化流程，您可以專注於手頭的任務，而不是暫時離開“區域”（您的生產力狀態）。

在這個 JavaScript 自動化教程中，您將學習如何使用 Gulp 自動化您的設計和開發過程。 如果您更注重設計，我鼓勵您克服任何恐懼並繼續閱讀。 另一方面，如果你是一名開發人員，一旦你理解了它背後的邏輯，你就可以徹底了解它。

Gulp 是一個構建系統，它使用 Node.js 的流來實現異步源-目標自動化方法。 一切都是用 JavaScript 編寫的，因此任何具有中級編碼知識的人都可以輕鬆上手。 Gulp 構建過程由一組觀察者和任務組成。 此外，Gulp 背後的社區在 npm 中維護了一個巨大的插件目錄，它有助於完成從連接 JavaScript 到從 SVG 創建圖標字體的任何任務。

Gulp 的替代品

那裡有很多替代品，其中大部分是在過去幾年中產生的——最引人注目的是 Grunt。 Gulp 和 Grunt 之間的比賽永遠不會有明顯的贏家，因為他們都有自己的優點和缺點，因此我將避免深入研究。 簡而言之，Grunt 對配置的高度依賴是引導人們轉向 Gulp 的 JavaScript 方法的原因。 與此同時，像 Koala 這樣的原生 GUI 實現已經取得了一些進展，主要來自那些不願進入編碼的人。 但是，對於捆綁的應用程序，不可能達到 Gulp 提供的可定制性和可擴展性級別。

過程自動化基礎

插件

插件是 gulp 完成每個過程的手段。 插件通過 npm 安裝並使用“require”啟動。

任務

對於 Gulp，任務總是有來源和目的地。 在它們之間存在調用每個插件並將轉換結果輸出到下一個管道的管道。

球體

Glob 是引用文件的通配符模式。 glob 或 glob 數組用作任務源中的輸入。

觀察者

觀察者觀察源文件的變化並在檢測到變化時調用任務。

gulpfile.js

這是“gulp”命令指向的 JavaScript 文件。 它包含從任務到觀察者或任務使用的其他代碼的所有內容。

一項簡單的任務

要開始使用，您需要 Node.js 和具有管理員訪問權限的命令行 shell。 你可以從這裡下載 Node.js。 安裝後，您可以運行以下命令以確保 npm 是最新的。

 sudo npm install npm -g

-g 標誌表明安裝將是全局的。

現在您已準備好安裝 Gulp 並開始調用一些簡單的任務。 使用以下命令全局安裝 Gulp。

 sudo npm install gulp -g

請注意，您也可以使用相同的命令進行更新。

您可以從 toptal-gulp-tutorial/step1 下載幫助您完成第一項任務的入門工具包。 它包括一個將 SCSS 文件編譯為 CSS 的非常簡單的任務。 它使用了 gulp-sass 插件，該插件使用了 libsass。 我在這裡選擇了 libsass，因為它比 Ruby 替代品快得多，儘管它缺少一些功能。 進入項目的根目錄後，您可以使用以下命令安裝所需的所有插件。

 npm install

此命令讀取 package.json 文件並安裝所需的所有依賴項。 我們在這裡使用“npm install”作為以下內容的簡寫：

 npm install gulp --save-dev npm install gulp-sass --save-dev

“–save-dev”標誌將選定的插件添加到 package.json devDependencies 中，以便下次您想要安裝所有內容時，可以使用方便的“npm install”。

此時您可以運行您的第一個任務。 運行以下命令，觀察 /scss 文件夾中的所有 SCSS 文件都編譯成相應目錄下的 CSS：

 gulp scss

請注意，在此示例中，我們指定要運行的任務。 如果我們省略了任務名稱，則會運行名為“default”的任務。

代碼演練

以上僅用 7 行 JavaScript 代碼即可完成。 當然，一旦您掌握了它的簡單性，您就會有賓至如歸的感覺：

 var gulp = require('gulp'); var scss = require('gulp-sass');

在開始時，我們初始化我們將使用的所有插件。 Gulp 是我們唯一不能沒有的：

 gulp.task('scss', function() {

我們定義名為“scss”的任務：

 return gulp.src('scss/*.scss')

設置任務的源文件。 這些被定義為 glob。 在此示例中，我們指的是“scss/”文件夾中以“.scss”結尾的所有文件。

 .pipe(scss())

此時，我們調用之前定義的 gulp-sass 插件：

 .pipe(gulp.dest('css'));

最後，我們使用“gulp.dest”來定義文件的目標文件夾。 如果文件連接在一起，這也可以是單個文件名。

為了進一步改進這個過程自動化的實現，你可以嘗試包含一些其他的 Gulp 插件。 例如，您可能希望使用 gulp-minify-css 縮小任務的最終產品，並使用 gulp-autoprefixer 自動添加供應商前綴。

僱傭觀察者

我創建了一個可以立即使用的觀察者入門工具包。 您可以從 toptal-gulp-tutorial/step2 下載它。 它包括先前創建的 SCSS 任務的增強版本，以及監視源文件和調用任務的監視器。 為了啟動它，請使用以下命令：

 gulp

此命令啟動啟動觀察者的“默認”任務。 此時，您可以編輯任何 SCSS 文件並觀察 CSS 文件是否被重新編譯。 您將能夠在命令行中看到 Gulp 的通知。

代碼演練

我們已經為我們的任務設置了一個觀察者，只用了 3 行額外的代碼。 也就是說，觀察者入門套件與介紹性示例沒有太大區別。 在本節中，我們將介紹所有的添加和更改。

 return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

在這個例子中，Gulp 源提供了一個 glob 數組。 第一個包括所有以“.scss”結尾的文件也在子文件夾中，第二個不包括以“_”開頭的文件。 這樣我們就可以使用 SCSS 的內置函數 @import 來連接 _page.scss 文件。

 gulp.task('default', ['scss'], function() {

在這裡，我們定義了“默認”任務。 “scss”任務在“default”之前作為依賴項運行。

 gulp.watch('scss/**/*.scss', ['scss']);

最後，我們調用 Gulp 的 watch 函數指向任何以“.scss”結尾的文件，並且每當發生更改事件時，運行“scss”任務。

現在您已準備好為其他自動化過程創建新的觀察者，例如 JavaScript 連接、代碼提示、CoffeeScript 編譯或任何其他可能想到的東西。 為了更深入地研究這個 JavaScript 自動化實現，我建議添加 gulp-notify，它會在任務運行時通知你。 此外，您可以創建一個單獨的任務來縮小生成的 CSS 代碼並使“scss”任務作為其依賴項運行。 最後，您可以使用 gulp-rename 將“.min”後綴添加到生成的文件中。

用於 JavaScript 自動化的高級 Gulp 插件

Gulp 的插件庫中有數千個插件，其中一些遠遠超出了構建過程的簡單 JavaScript 自動化。 以下是一些傑出的例子：

瀏覽器同步

BrowserSync 注入 CSS、JavaScript 並在進行更改時自動刷新瀏覽器。 此外，它還包含一個 ghostMode 功能，可用於嚇唬您的同事或大大加快您的瀏覽器測試速度。

瀏覽器化

Browserify 分析應用程序中的“require”調用並將其轉換為捆綁的 JavaScript 文件。 此外，還有一個可以轉換為瀏覽器代碼的 npm 包列表。

網頁包

與 Browserify 類似，Webpack 旨在將具有依賴關係的模塊轉換為靜態文件。 這為用戶提供了更多關於如何設置模塊依賴項的自由，並且不旨在遵循 Node.js 的代碼風格。

業力

Gulp-karma 為 Gulp 帶來了臭名昭著的測試環境。 Karma 遵循 Gulp 支持的最少配置方法。

結論

在這個流程自動化教程中，我展示了使用 Gulp 作為構建工具的美感和簡單性。 按照本教程中描述的步驟，您現在可以在未來和遺留項目中完全自動化您的軟件開發過程。 花一些時間為您的舊項目設置構建系統肯定會在未來為您節省寶貴的時間。

請繼續關注即將推出的更高級的 Gulp 教程。