在IntelliJ IDEA中使用Gulp

2018-09-26 11:37 更新

Gulp

注意:在开始之前,请确保您的计算机上有Node.js.

IntelliJ IDEA与Gulp.js任务运行器集成。IntelliJ IDEA解析Gulpfile.js文件,识别任务定义,在树视图中显示任务,允许您在树中的任务及其在Gulpfile.js文件中的定义之间导航,并支持运行和调试任务。

Gulp.js任务可以从专用的Gulp工具窗口中的任务树或从Gulpfile.js文件中运行,方法是通过启动Gulp.js运行配置,或者从另一个运行配置作为a a启动前任务。IntelliJ IDEA显示在“运行”工具窗口中执行任务的结果。工具窗口显示Grunt输出,报告发生的错误,列出尚未找到的包或插件等。上次执行的任务的名称显示在工具窗口的标题栏上。

安装Gulp.js

要在IntelliJ IDEA项目中使用Gulp,您需要两个包:

  • 一个全局安装的用于执行Gulp命令的Gulp -cli包(Gulp命令行接口)。
  • 作为开发依赖项安装的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会自动创建临时运行配置,您可以根据需要保存并稍后使用。

通过在“项目工具”窗口中的Gulpfile.js的上下文菜单或编辑器中打开的Gulpfile.js的上下文菜单中的Show Gulp Tasks来在调用Gulp.js时立即开始构建任务树。树是根据Gulp.js调用的GulpFiel.js文件构建的。如果项目中有多个文件,则可以为每个文件构建单独的任务树,并在不放弃先前构建的任务树的情况下运行任务。每棵树都显示在一个单独的节点下。 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. 在“默认值”节点下,单击“Gulp.js”。
  3. 在打开的“运行/调试配置:Gulp.js”对话框中,“节点选项”文本框中键入:--harmony,然后单击“确定”。

从Gulp工具窗口构建任务树

  • 在Gulp工具窗口中,单击工具栏上的图标一般添加,然后从列表中选择所需的Gulpfile.js文件。默认情况下,IntelliJ IDEA会在项目的根目录中显示该Gulpfile.js文件。
  • 如果您有其他Gulpfile.js文件,请单击“选择Gulpfile.js”,然后在打开的对话框中选择所需的Gulpfile.js文件。IntelliJ IDEA在其标题上添加一个新节点,其中包含所选Gulpfile.js文件的路径,并在新节点下构建任务树。

重建树

  • 切换到所需的节点,然后单击工具栏上的icon_reload_grunt.png

按名称对树中的任务进行排序

  • 单击工具栏上的viewMode.png,在菜单上选择“排序依据 ”,然后选择“名称”。
    默认情况下,树按照Gulpfile.js定义的顺序显示任务(“定义顺序”选项)。

运行任务

  • 双击任务。
  • 在树中选择任务,然后按Enter,或在上下文菜单中选择“运行<任务名称>(Run <task name>)”。

运行默认任务

  • 在树中选择根节点,然后在所选内容的上下文菜单中选择“运行默认值”。

运行多个任务

  • 使用多选模式:按住快捷键:Shift(对于相邻项),或Ctrl (对于非相邻项)键并选择所需任务,然后在所选内容的上下文菜单中选择“运行”或“调试”。

导航到任务的定义

  • 在树中选择所需任务,然后在所选内容的上下文菜单中选择“跳转到源”。

从Gulpfile.js运行任务

  1. 将光标定位到要运行的任务的定义,然后在所选内容的上下文菜单中选择“运行<任务名称>(Run <task name>)”。IntelliJ IDEA使用所选任务的名称创建并启动临时运行配置。
  2. 要保存自动创建的临时运行配置,请将光标定位到创建它的任务的定义,然后在选择的上下文菜单中选择“保存<任务名称>(Save <task name>)”。

根据运行配置运行和调试任务

除了使用IntelliJ IDEA自动创建的临时运行配置外,您还可以创建和启动自己的Gulp.js运行配置。

创建Gulp.js运行配置

  1. 在主菜单上选择:运行|编辑配置。
  2. 单击工具栏上的图标一般添加,然后从弹出列表中选择:Gulp.js。将打开该“运行/调试配置:Gulp.js”对话框。
  3. 指定运行配置的名称,要运行的任务(使用空格作为分隔符),定义这些任务的Gulpfile.js文件的位置以及Gulp当前项目根目录下安装的程序包的路径。
  4. 指定要使用的Node.js解释器。这可能是一个本地Node.js的解释或适用于Linux在Windows子系统的Node.js。

    (可选)指定Node.js的环境变量和执行任务的参数。使用格式:--<parameter_name> <parameter_value>,例如:--env development。从Gulp官方网站了解更多信息。

运行任务

  • 从主工具栏上的列表中选择新创建的运行配置,然后单击列表旁边的icons toolwindows toolWindowRun svg。输出显示在“运行”工具窗口中。

调试任务

  1. 创建Gulp.js运行/调试配置,如上所述。
  2. 在编辑器中打开Gulpfile.js文件,并在必要时在其中设置断点。
  3. 要启动调试会话,请从主工具栏的列表中选择所需的调试配置,然后单击列表旁边的图标动作startDebugger svg或选择:运行|调试<配置名称>(Run | Debug <configuration name>)。
  4. 在打开的“调试”工具窗口中,分析暂停的任务执行,逐步执行任务等。

将Gulp任务作为启动前任务运行

  1. 通过在在主菜单上选择:运行|编辑配置,来打开“运行/调试配置”对话框 ,从列表中选择所需的配置,或通过单击图标一般添加svg,并选择相关的运行配置类型重新创建。
  2. 在打开的对话框中,在启动前区域单击图标一般添加svg并从下拉列表中选择运行Gulp任务。
  3. 在打开的Gulp任务对话框中,在所需任务的定义位置指定Gulpfile.js,选择要执行的任务,并指定要传递给Gulp工具的参数。

    指定Node.js解释器的位置,传递给它的参数以及gulp包的路径。

自动运行Gulp.js任务

如果您有一些定期运行的任务,则可以将相应的运行配置添加到启动任务列表中。任务将在项目启动时自动执行。

  1. 在“设置/首选项”对话框(Ctrl+Alt+S)中,单击“工具”下的“启动任务” 。
  2. 在打开的“启动任务”页面上,单击工具栏上的加
  3. 从下拉列表中,选择所需的Gulp.js运行配置。配置将添加到列表中。

    如果项目中没有可用的适用配置,请单击加 并选择“编辑配置”。然后在打开的“运行/调试配置:Gulp.js”页面上定义具有所需设置的配置。保存新配置时,它会自动添加到启动任务列表中。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号