在IntelliJ IDEA中使用Gulp

Gulp

注意：在開(kāi)始之前，請(qǐng)確保您的計(jì)算機(jī)上有Node.js.

IntelliJ IDEA與Gulp.js任務(wù)運(yùn)行器集成。IntelliJ IDEA解析Gulpfile.js文件，識(shí)別任務(wù)定義，在樹(shù)視圖中顯示任務(wù)，允許您在樹(shù)中的任務(wù)及其在Gulpfile.js文件中的定義之間導(dǎo)航，并支持運(yùn)行和調(diào)試任務(wù)。

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

安裝Gulp.js

要在IntelliJ IDEA項(xiàng)目中使用Gulp，您需要兩個(gè)包：

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

在全局范圍內(nèi)安裝gulp-cli

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

在項(xiàng)目中安裝Gulp.js.

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

從任務(wù)樹(shù)運(yùn)行Gulp.js任務(wù)

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

通過(guò)在“項(xiàng)目工具”窗口中的Gulpfile.js的上下文菜單或編輯器中打開(kāi)的Gulpfile.js的上下文菜單中的Show Gulp Tasks來(lái)在調(diào)用Gulp.js時(shí)立即開(kāi)始構(gòu)建任務(wù)樹(shù)。樹(shù)是根據(jù)Gulp.js調(diào)用的GulpFiel.js文件構(gòu)建的。如果項(xiàng)目中有多個(gè)文件，則可以為每個(gè)文件構(gòu)建單獨(dú)的任務(wù)樹(shù)，并在不放棄先前構(gòu)建的任務(wù)樹(shù)的情況下運(yùn)行任務(wù)。每棵樹(shù)都顯示在一個(gè)單獨(dú)的節(jié)點(diǎn)下。 Gulpfile.jsGulpfile.jsGulpfile.jsGulpfile.js

從技術(shù)上講，IntelliJ IDEA根據(jù)默認(rèn)的Gulp.js運(yùn)行配置調(diào)用Gulp.js和Gulpfile.js進(jìn)程。這是靜默完成的，不需要你身邊的任何步驟。

打開(kāi)Gulp工具窗口

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

默認(rèn)情況下，IntelliJ IDEA無(wú)法識(shí)別ES6 Gulpfile.js并且無(wú)法構(gòu)建任務(wù)樹(shù)。要解決此問(wèn)題，請(qǐng)更新默認(rèn)的Gulp.js運(yùn)行配置。

注意：在當(dāng)前IntelliJ IDEA會(huì)話期間第一次構(gòu)建任務(wù)樹(shù)時(shí)，Gulp工具窗口尚未打開(kāi)。

從ES6 Gulpfile.js構(gòu)建任務(wù)樹(shù)

1. 在主菜單上選擇：運(yùn)行|編輯配置。
2. 在“默認(rèn)值”節(jié)點(diǎn)下，單擊“Gulp.js”。
3. 在打開(kāi)的“運(yùn)行/調(diào)試配置：Gulp.js”對(duì)話框中，“節(jié)點(diǎn)選項(xiàng)”文本框中鍵入：--harmony，然后單擊“確定”。

從Gulp工具窗口構(gòu)建任務(wù)樹(shù)

• 在Gulp工具窗口中，單擊工具欄上的，然后從列表中選擇所需的Gulpfile.js文件。默認(rèn)情況下，IntelliJ IDEA會(huì)在項(xiàng)目的根目錄中顯示該Gulpfile.js文件。
• 如果您有其他Gulpfile.js文件，請(qǐng)單擊“選擇Gulpfile.js”，然后在打開(kāi)的對(duì)話框中選擇所需的Gulpfile.js文件。IntelliJ IDEA在其標(biāo)題上添加一個(gè)新節(jié)點(diǎn)，其中包含所選Gulpfile.js文件的路徑，并在新節(jié)點(diǎn)下構(gòu)建任務(wù)樹(shù)。

重建樹(shù)

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

按名稱對(duì)樹(shù)中的任務(wù)進(jìn)行排序

• 單擊工具欄上的，在菜單上選擇“排序依據(jù) ”，然后選擇“名稱”。
  默認(rèn)情況下，樹(shù)按照Gulpfile.js定義的順序顯示任務(wù)（“定義順序”選項(xiàng)）。

運(yùn)行任務(wù)

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

運(yùn)行默認(rèn)任務(wù)

• 在樹(shù)中選擇根節(jié)點(diǎn)，然后在所選內(nèi)容的上下文菜單中選擇“運(yùn)行默認(rèn)值”。

運(yùn)行多個(gè)任務(wù)

• 使用多選模式：按住快捷鍵：Shift（對(duì)于相鄰項(xiàng)），或Ctrl （對(duì)于非相鄰項(xiàng)）鍵并選擇所需任務(wù)，然后在所選內(nèi)容的上下文菜單中選擇“運(yùn)行”或“調(diào)試”。

導(dǎo)航到任務(wù)的定義

• 在樹(shù)中選擇所需任務(wù)，然后在所選內(nèi)容的上下文菜單中選擇“跳轉(zhuǎn)到源”。

從Gulpfile.js運(yùn)行任務(wù)

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

根據(jù)運(yùn)行配置運(yùn)行和調(diào)試任務(wù)

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

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

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

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

運(yùn)行任務(wù)

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

調(diào)試任務(wù)

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

將Gulp任務(wù)作為啟動(dòng)前任務(wù)運(yùn)行

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

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

自動(dòng)運(yùn)行Gulp.js任務(wù)

如果您有一些定期運(yùn)行的任務(wù)，則可以將相應(yīng)的運(yùn)行配置添加到啟動(dòng)任務(wù)列表中。任務(wù)將在項(xiàng)目啟動(dòng)時(shí)自動(dòng)執(zhí)行。

1. 在“設(shè)置/首選項(xiàng)”對(duì)話框（Ctrl+Alt+S）中，單擊“工具”下的“啟動(dòng)任務(wù)” 。
2. 在打開(kāi)的“啟動(dòng)任務(wù)”頁(yè)面上，單擊工具欄上的。
3. 從下拉列表中，選擇所需的Gulp.js運(yùn)行配置。配置將添加到列表中。

   如果項(xiàng)目中沒(méi)有可用的適用配置，請(qǐng)單擊 并選擇“編輯配置”。然后在打開(kāi)的“運(yùn)行/調(diào)試配置：Gulp.js”頁(yè)面上定義具有所需設(shè)置的配置。保存新配置時(shí)，它會(huì)自動(dòng)添加到啟動(dòng)任務(wù)列表中。