在IntelliJ IDEA中使用Grunt

Grunt

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

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

使用IntelliJ IDEA，您可以在專用的Grunt工具窗口中的任務(wù)樹中運(yùn)行Grunt任務(wù) ，或使用Grunt運(yùn)行配置，或作為啟動(dòng)前任務(wù)。IntelliJ IDEA顯示在“運(yùn)行”工具窗口中執(zhí)行任務(wù)的結(jié)果。工具窗口顯示Grunt輸出，報(bào)告發(fā)生的錯(cuò)誤，列出尚未找到的包或插件等。上次執(zhí)行的任務(wù)的名稱顯示在工具窗口的標(biāo)題欄上。

安裝Grunt

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

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

在全球范圍內(nèi)安裝grunt-cli

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

在項(xiàng)目中安裝Grunt

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

從任務(wù)樹運(yùn)行Grunt任務(wù)

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

打開Grunt工具窗口

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

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

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

重建樹

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

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

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

運(yùn)行任務(wù)或目標(biāo)

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

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

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

運(yùn)行多個(gè)任務(wù)或目標(biāo)

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

跳轉(zhuǎn)到任務(wù)或目標(biāo)的定義

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

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

除了使用IntelliJ IDEA在從任務(wù)樹運(yùn)行任務(wù)或目標(biāo)時(shí)自動(dòng)創(chuàng)建的臨時(shí)運(yùn)行配置外，您還可以創(chuàng)建并啟動(dòng)自己的Grunt.js運(yùn)行配置。

創(chuàng)建Grunt.js運(yùn)行/調(diào)試配置

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

   （可選）指定Node.js特定的選項(xiàng)參數(shù)以及要傳遞給Node.js的環(huán)境變量。

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

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

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

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

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

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

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

自動(dòng)運(yùn)行Grunt任務(wù)

如果您有定期運(yùn)行的某些任務(wù)或目標(biāo)，則可以將相應(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. 在打開的“啟動(dòng)任務(wù)”頁(yè)面上，單擊工具欄上的。
3. 從下拉列表中，選擇所需的Grunt運(yùn)行配置。配置將添加到列表中。

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