在IntelliJ IDEA中使用Gulp

Gulp

注意：在開始之前，請確保您的計算機上有Node.js.

IntelliJ IDEA與Gulp.js任務運行器集成。IntelliJ IDEA解析Gulpfile.js文件，識別任務定義，在樹視圖中顯示任務，允許您在樹中的任務及其在Gulpfile.js文件中的定義之間導航，并支持運行和調試任務。

Gulp.js任務可以從專用的Gulp工具窗口中的任務樹或從Gulpfile.js文件中運行，方法是通過啟動Gulp.js運行配置，或者從另一個運行配置作為a a啟動前任務。IntelliJ IDEA顯示在“運行”工具窗口中執(zhí)行任務的結果。工具窗口顯示Grunt輸出，報告發(fā)生的錯誤，列出尚未找到的包或插件等。上次執(zhí)行的任務的名稱顯示在工具窗口的標題欄上。

安裝Gulp.js

要在IntelliJ IDEA項目中使用Gulp，您需要兩個包：

• 一個全局安裝的用于執(zhí)行Gulp命令的Gulp -cli包（Gulp命令行接口）。
• 作為開發(fā)依賴項安裝的gulp包，用于構建項目任務樹并在編輯Gulpfile.js文件時提供編碼幫助。從Gulp.js官方網站了解更多有關Gupfile.js的信息。

在全局范圍內安裝gulp-cli

• 打開內置的IntelliJ IDEA終端（Alt+F12），并在命令提示符下鍵入：npm install -global gulp-cli。

在項目中安裝Gulp.js.

• 打開內置的IntelliJ IDEA終端（Alt+F12）并在命令提示符下鍵入：npm install gulp --save-dev。

從任務樹運行Gulp.js任務

IntelliJ IDEA允許您從Gulp工具窗口中的任務樹輕松快速地運行Gulp.js任務。IntelliJ IDEA會自動創(chuàng)建臨時運行配置，您可以根據需要保存并稍后使用。

通過在“項目工具”窗口中的Gulpfile.js的上下文菜單或編輯器中打開的Gulpfile.js的上下文菜單中的Show Gulp Tasks來在調用Gulp.js時立即開始構建任務樹。樹是根據Gulp.js調用的GulpFiel.js文件構建的。如果項目中有多個文件，則可以為每個文件構建單獨的任務樹，并在不放棄先前構建的任務樹的情況下運行任務。每棵樹都顯示在一個單獨的節(jié)點下。 Gulpfile.jsGulpfile.jsGulpfile.jsGulpfile.js

從技術上講，IntelliJ IDEA根據默認的Gulp.js運行配置調用Gulp.js和Gulpfile.js進程。這是靜默完成的，不需要你身邊的任何步驟。

打開Gulp工具窗口

• 在“項目”工具窗口中 選擇所需的Gulpfile.js文件，或在編輯器中將其打開，然后在上下文菜單中選擇“顯示Gulp任務”。

默認情況下，IntelliJ IDEA無法識別ES6 Gulpfile.js并且無法構建任務樹。要解決此問題，請更新默認的Gulp.js運行配置。

注意：在當前IntelliJ IDEA會話期間第一次構建任務樹時，Gulp工具窗口尚未打開。

從ES6 Gulpfile.js構建任務樹

1. 在主菜單上選擇：運行|編輯配置。
2. 在“默認值”節(jié)點下，單擊“Gulp.js”。
3. 在打開的“運行/調試配置：Gulp.js”對話框中，“節(jié)點選項”文本框中鍵入：--harmony，然后單擊“確定”。

從Gulp工具窗口構建任務樹

• 在Gulp工具窗口中，單擊工具欄上的，然后從列表中選擇所需的Gulpfile.js文件。默認情況下，IntelliJ IDEA會在項目的根目錄中顯示該Gulpfile.js文件。
• 如果您有其他Gulpfile.js文件，請單擊“選擇Gulpfile.js”，然后在打開的對話框中選擇所需的Gulpfile.js文件。IntelliJ IDEA在其標題上添加一個新節(jié)點，其中包含所選Gulpfile.js文件的路徑，并在新節(jié)點下構建任務樹。

重建樹

• 切換到所需的節(jié)點，然后單擊工具欄上的。

按名稱對樹中的任務進行排序

• 單擊工具欄上的，在菜單上選擇“排序依據 ”，然后選擇“名稱”。
  默認情況下，樹按照Gulpfile.js定義的順序顯示任務（“定義順序”選項）。

運行任務

• 雙擊任務。
• 在樹中選擇任務，然后按Enter，或在上下文菜單中選擇“運行<任務名稱>（Run <task name>）”。

運行默認任務

• 在樹中選擇根節(jié)點，然后在所選內容的上下文菜單中選擇“運行默認值”。

運行多個任務

• 使用多選模式：按住快捷鍵：Shift（對于相鄰項），或Ctrl （對于非相鄰項）鍵并選擇所需任務，然后在所選內容的上下文菜單中選擇“運行”或“調試”。

導航到任務的定義

• 在樹中選擇所需任務，然后在所選內容的上下文菜單中選擇“跳轉到源”。

從Gulpfile.js運行任務

1. 將光標定位到要運行的任務的定義，然后在所選內容的上下文菜單中選擇“運行<任務名稱>（Run <task name>）”。IntelliJ IDEA使用所選任務的名稱創(chuàng)建并啟動臨時運行配置。
2. 要保存自動創(chuàng)建的臨時運行配置，請將光標定位到創(chuàng)建它的任務的定義，然后在選擇的上下文菜單中選擇“保存<任務名稱>（Save <task name>）”。

根據運行配置運行和調試任務

除了使用IntelliJ IDEA自動創(chuàng)建的臨時運行配置外，您還可以創(chuàng)建和啟動自己的Gulp.js運行配置。

創(chuàng)建Gulp.js運行配置

1. 在主菜單上選擇：運行|編輯配置。
2. 單擊工具欄上的，然后從彈出列表中選擇：Gulp.js。將打開該“運行/調試配置：Gulp.js”對話框。
3. 指定運行配置的名稱，要運行的任務（使用空格作為分隔符），定義這些任務的Gulpfile.js文件的位置以及Gulp當前項目根目錄下安裝的程序包的路徑。
4. 指定要使用的Node.js解釋器。這可能是一個本地Node.js的解釋或適用于Linux在Windows子系統(tǒng)的Node.js。

   （可選）指定Node.js的環(huán)境變量和執(zhí)行任務的參數。使用格式：--<parameter_name> <parameter_value>，例如：--env development。從Gulp官方網站了解更多信息。

運行任務

• 從主工具欄上的列表中選擇新創(chuàng)建的運行配置，然后單擊列表旁邊的。輸出顯示在“運行”工具窗口中。

調試任務

1. 創(chuàng)建Gulp.js運行/調試配置，如上所述。
2. 在編輯器中打開Gulpfile.js文件，并在必要時在其中設置斷點。
3. 要啟動調試會話，請從主工具欄的列表中選擇所需的調試配置，然后單擊列表旁邊的或選擇：運行|調試<配置名稱>（Run | Debug <configuration name>）。
4. 在打開的“調試”工具窗口中，分析暫停的任務執(zhí)行，逐步執(zhí)行任務等。

將Gulp任務作為啟動前任務運行

1. 通過在在主菜單上選擇：運行|編輯配置，來打開“運行/調試配置”對話框 ，從列表中選擇所需的配置，或通過單擊，并選擇相關的運行配置類型重新創(chuàng)建。
   
2. 在打開的對話框中，在啟動前區(qū)域單擊并從下拉列表中選擇運行Gulp任務。
3. 在打開的Gulp任務對話框中，在所需任務的定義位置指定Gulpfile.js，選擇要執(zhí)行的任務，并指定要傳遞給Gulp工具的參數。

   指定Node.js解釋器的位置，傳遞給它的參數以及gulp包的路徑。

自動運行Gulp.js任務

如果您有一些定期運行的任務，則可以將相應的運行配置添加到啟動任務列表中。任務將在項目啟動時自動執(zhí)行。

1. 在“設置/首選項”對話框（Ctrl+Alt+S）中，單擊“工具”下的“啟動任務” 。
2. 在打開的“啟動任務”頁面上，單擊工具欄上的。
3. 從下拉列表中，選擇所需的Gulp.js運行配置。配置將添加到列表中。

   如果項目中沒有可用的適用配置，請單擊 并選擇“編輯配置”。然后在打開的“運行/調試配置：Gulp.js”頁面上定義具有所需設置的配置。保存新配置時，它會自動添加到啟動任務列表中。