咕噜咕噜
最后修改时间:2023 年 9 月 1 日所需插件:
Javascript and TypeScript
- 该插件仅在 IntelliJ IDEA Ultimate 中可用,默认情况下启用。
IntelliJ IDEA 与Gulp.js Task Runner集成。IntelliJ IDEA 解析Gulpfile.js文件,识别任务的定义,在树视图中显示任务,允许您在树中的任务及其在Gulpfile.js文件中的定义之间导航,并支持运行和调试任务。
Gulp.js 任务可以从专用Gulp 工具窗口中的任务树运行,或者通过启动Gulp.js 运行配置从Gulpfile.js文件运行,或者从另一个运行配置作为启动前任务运行。IntelliJ IDEA 在运行工具窗口中显示执行任务的结果。工具窗口显示Grunt输出,报告发生的错误,列出尚未找到的包或插件等。最后执行的任务的名称显示在工具窗口的标题栏上。
在你开始之前
下载并安装Node.js。
安装 Gulp.js
要在 IntelliJ IDEA 项目中使用 Gulp,您需要两个包:
全局安装的gulp-cli软件包(Gulp 命令行界面),用于执行 Gulp 命令。
作为开发依赖项安装的gulp包用于构建项目任务树并在编辑Gulpfile.js文件时提供编码帮助。从Gulp.js 官方网站了解有关Gulpfile.js的更多信息。
全局安装 gulp-cli
在嵌入式终端( ) 中,键入:AltF12
npm install -global gulp-cli
在项目中安装Gulp.js
在嵌入式终端( ) 中,键入:AltF12
npm install gulp --save-dev
从任务树运行 Gulp.js 任务
IntelliJ IDEA 允许您直接从Gulp工具窗口中的任务树轻松快速地运行 Gulp.js 任务。IntelliJ IDEA 会自动创建一个临时运行配置,您可以保存该配置并在以后使用(如有必要)。
一旦您通过在项目工具窗口中的Gulpfile.js或在编辑器中打开的Gulpfile.js的上下文菜单上选择“显示 Gulp 任务”来调用 Gulp.js ,Gulp.js 就会开始构建任务树。该树是根据调用 Gulp.js 的Gulpfile.js文件构建的。如果您的项目中有多个Gulpfile.js文件,您可以为每个文件构建一个单独的任务树并运行任务,而无需放弃之前构建的任务树。每棵树都显示在单独的节点下。
从技术上讲,IntelliJ IDEA 会根据默认的 Gulp.js 运行配置调用 Gulp.js并处理Gulpfile.js。这是默默完成的,不需要您采取任何步骤。
打开 Gulp 工具窗口
当您在当前 IntelliJ IDEA 会话期间首次构建任务树时,Gulp工具窗口尚未打开。
在“项目”工具窗口中选择所需的Gulpfile.js文件,或在编辑器中打开它,然后从上下文菜单中选择“显示 Gulp 任务” 。
默认情况下,IntelliJ IDEA 无法识别Gulpfile.js中的 ES6 ,并且无法构建任务树。要解决此问题,请更新默认的 Gulp.js 运行配置。
从 ES6 Gulpfile.js 构建任务树
转到“运行”| 编辑配置。或者,从工具栏的列表中选择编辑配置。
在模板节点下,单击Gulp.js。
在打开的“运行/调试配置:Gulp.js”
--harmony
对话框中,输入“节点选项”字段,然后单击“确定”。
从 Gulp 工具窗口构建任务树
在Gulp工具窗口中,单击工具栏上的 ,然后从列表中选择所需的Gulpfile.js文件。默认情况下,IntelliJ IDEA在项目的根目录中显示Gulpfile.js文件。
如果您有其他Gulpfile.js文件,请单击“选择 Gulpfile.js” ,然后在打开的对话框中选择所需的Gulpfile.js文件。IntelliJ IDEA 添加一个新节点,其标题上包含所选Gulpfile.js文件的路径,并在新节点下构建一个任务树。
重新构建一棵树
切换到需要的节点,点击工具栏上的 。
按任务名称对树中的任务进行排序
单击工具栏上的 ,从菜单中选择“排序依据” ,然后选择“名称”。
默认情况下,树按照Gulpfile.js中定义的顺序显示任务(选项定义顺序)。
运行任务
双击该任务。
在树中选择任务,然后按或从上下文菜单中选择“运行 <任务名称>” 。Enter
运行默认任务
选择树中的根节点,然后从上下文菜单中选择“运行默认值” 。
运行多个任务
使用多选模式:按住(对于相邻项目)或(对于非相邻项目)键并选择所需的任务,然后从所选内容的上下文菜单中选择“运行”或“调试” 。ShiftCtrl
导航至任务的定义
在树中选择所需的任务,然后从所选内容的上下文菜单中选择“跳转到源” 。
从 Gulpfile.js 运行任务
将插入符号放在要运行的任务的定义处,然后从上下文菜单中选择“运行 <任务名称>” 。IntelliJ IDEA 使用所选任务的名称创建并启动临时运行配置。
要保存自动创建的临时运行配置,请将插入符号放在为其创建的任务的定义处,然后从所选内容的上下文菜单中选择“保存 <任务名称>” 。
根据运行配置运行和调试任务
除了使用 IntelliJ IDEA 自动创建的临时运行配置之外,您还可以创建并启动自己的 Gulp.js 运行配置。
创建 Gulp.js 运行配置
转到“运行”| 编辑配置。或者,从工具栏的列表中选择编辑配置。
在打开的“编辑配置”对话框中,单击工具栏上的“添加”按钮 ( ),然后从列表中选择Gulp.js。将打开“运行/调试配置:Gulp.js”对话框。
指定运行配置的名称、要运行的任务(使用空格作为分隔符)、定义这些任务的Gulpfile.js文件的位置以及安装在当前项目根目录下的gulp包的路径。
指定要使用的 Node.js 解释器。
如果您选择项目别名,IntelliJ IDEA 将自动使用Node.js页面上的节点解释器字段中的项目默认解释器。在大多数情况下,IntelliJ IDEA 会检测项目默认解释器并填充该字段本身。
您还可以选择另一个已配置的本地或远程解释器,或者单击并配置一个新解释器。
(可选)指定Node.js 的环境变量和执行任务的参数。使用格式
--<parameter_name> <parameter_value>
,例如:--env development
。从Gulp 官方网站了解更多信息。
运行任务
选择新创建的从工具栏上的“选择运行/调试配置”列表中选择配置,然后单击列表旁边的“运行”按钮 ( )。输出显示在运行工具窗口中。
调试任务
将 Gulp 任务作为启动前任务运行
通过选择“运行”|“打开运行/调试配置”对话框 在主菜单上编辑配置,然后从列表中选择所需的配置,或者通过单击并选择相关的运行配置类型来重新创建配置。
在打开的对话框中,单击“启动前”区域,然后从列表中选择“运行 Gulp 任务” 。
在打开的Gulp 任务对话框中,指定定义所需任务的Gulpfile.js ,选择要执行的任务,并指定要传递给 Gulp 工具的参数。
指定 Node.js 解释器的位置、要传递给它的参数以及gulp包的路径。
自动运行 Gulp.js 任务
如果您有一些定期运行的任务,您可以将相应的运行配置添加到启动任务列表中。这些任务将在项目启动时自动执行。
感谢您的反馈意见!