在IntelliJ IDEA中使用Grunt
Grunt
注意:在开始之前,请确保您的计算机上有Node.js.
IntelliJ IDEA与Grunt JavaScript Task Runner集成。IntelliJ IDEA解析Gruntfile.js文件,识别任务和目标的定义,在树视图中显示任务和目标,允许您在树中的任务或目标及其在Gruntfile.js文件中的定义之间导航,并支持运行和调试任务和目标。
使用IntelliJ IDEA,您可以在专用的Grunt工具窗口中的任务树中运行Grunt任务 ,或使用Grunt运行配置,或作为启动前任务。IntelliJ IDEA显示在“运行”工具窗口中执行任务的结果。工具窗口显示Grunt输出,报告发生的错误,列出尚未找到的包或插件等。上次执行的任务的名称显示在工具窗口的标题栏上。
安装Grunt
要在IntelliJ IDEA项目中使用Grunt,您需要两个包:
- 一个全局安装的用于执行Grunt命令的Grunt -cli包(Grunt命令行接口)。
- 作为开发依赖项安装的grunt包,用于构建项目任务树并在编辑Gruntfile.js或Gruntfile.coffee文件时提供编码帮助。从Grunt官方网站了解更多有关Gruntfile.js信息。
在全球范围内安装grunt-cli
- 打开内置的IntelliJ IDEA终端(Alt+F12)并在命令提示符下键入:npm install -g grunt-cli。
在项目中安装Grunt
- 打开内置的IntelliJ IDEA终端(Alt+F12)并在命令提示符下键入:npm install grunt --save-dev。
从任务树运行Grunt任务
IntelliJ IDEA允许您从Grunt工具窗口的任务树轻松快速地运行Grunt任务。IntelliJ IDEA会自动创建临时运行配置,您可以根据需要保存并稍后使用。
打开Grunt工具窗口
- 在“项目”工具窗口中选择所需的Gruntfile.js文件,或在编辑器中将其打开,然后在上下文菜单中选择“显示Grunt任务”。
从Grunt工具窗口构建任务树
- 在Grunt工具窗口中,单击工具栏上的,然后从列表中选择所需的Gruntfile.js文件。默认情况下,IntelliJ IDEA会在项目的根目录中显示该Gruntfile.js文件。
- 如果您有其他Gruntfile.js文件,请单击“选择Gruntfile.js”,然后在打开的对话框中选择所需的Gruntfile.js文件。IntelliJ IDEA在其标题上添加一个新节点,其中包含所选Gruntfile.js文件的路径,并在新节点下构建任务树。
重建树
- 切换到所需的节点,然后单击工具栏上的。
按名称对树中的任务进行排序
- 单击工具栏上的, 在菜单上选择“排序依据”,然后选择“名称”。
默认情况下,树按照Gruntfile.js定义的顺序显示任务(“定义顺序”选项)。
运行任务或目标
- 双击任务或目标。
- 在树中选择任务或目标,然后按Enter,或在上下文菜单中选择“运行<任务名称>(Run <task name>)”。
运行默认任务
- 在树中选择根节点,然后在所选内容的上下文菜单中选择“运行默认值 ”。
运行多个任务或目标
- 使用多选模式:按住快捷键:Shift(对于相邻项),或Ctrl (对于非相邻项)键并选择所需的任务或目标,然后在选择的上下文菜单中选择“运行”或“调试”。
跳转到任务或目标的定义
- 在树中选择所需的任务或目标,然后在所选内容的上下文菜单中选择“跳转到源”。
根据运行配置运行和调试任务
除了使用IntelliJ IDEA在从任务树运行任务或目标时自动创建的临时运行配置外,您还可以创建并启动自己的Grunt.js运行配置。
创建Grunt.js运行/调试配置
- 在主菜单上选择:运行|编辑配置。
- 单击工具栏上的,然后从弹出列表中选择Grunt.js。将打开该“运行/调试配置:Grunt.js”对话框。
- 指定运行配置的名称,要运行的任务(使用空格作为分隔符),定义这些任务的Gruntfile.js文件的位置以及全局安装的grunt-cli包的路径。
- 指定要使用的Node.js解释器。这可能是一个本地Node.js的解释或适用于Linux在Windows子系统中的Node.js。
(可选)指定Node.js特定的选项参数以及要传递给Node.js的环境变量。
运行任务
- 从主工具栏上的列表中选择新创建的运行配置,然后单击列表旁边的。IntelliJ IDEA在“运行”工具窗口中显示任务输出。
调试任务
- 创建Grunt.js运行/调试配置,如上所述。
- 在编辑器中打开Gruntfile.js文件,并在必要时在其中设置断点。
- 要启动调试会话,请从主工具栏的列表中选择所需的调试配置,然后单击列表旁边的,或选择:运行|调试<配置名称>(Run|Debug <configuration name>)。
- 在打开的“调试”工具窗口中,分析暂停的任务执行,逐步执行任务等。
将Grunt任务作为启动前任务运行
- 通过在在主菜单上选择:运行|编辑配置,来打开“运行/调试配置对话框”对话框 ,从列表中选择所需的配置,或通过单击,并选择相关的运行配置类型来重新创建它。
- 在打开的对话框中,在“启动前”的区域单击,并从下拉列表中选择“运行Grunt任务”。
- 在打开的Grunt任务对话框中,在所需任务的定义位置指定Gruntfile.js,选择要执行的任务,并指定要传递给Grunt工具的参数。
指定Node.js解释器的位置,传递给它的参数以及grunt-cli包的路径。
自动运行Grunt任务
如果您有定期运行的某些任务或目标,则可以将相应的运行配置添加到启动任务列表中。任务将在项目启动时自动执行。
- 在“设置/首选项”对话框(Ctrl+Alt+S)中,单击“工具”下的“启动任务”。
- 在打开的“启动任务”页面上,单击工具栏上的。
- 从下拉列表中,选择所需的Grunt运行配置。配置将添加到列表中。
如果项目中没有可用的适用配置,请单击 并选择“编辑配置”。然后在打开的“运行/调试配置:Grunt.js”页面上定义具有所需设置的配置。保存新配置时,它会自动添加到启动任务列表中。