专业的

咕噜咕噜

全局安装 gulp-cli

• 在嵌入式终端( ) 中，键入：AltF12

  npm install -global gulp-cli

在项目中安装Gulp.js

• 在嵌入式终端( ) 中，键入：AltF12

  npm install gulp --save-dev

打开 Gulp 工具窗口

当您在当前 PyCharm 会话期间首次构建任务树时，Gulp工具窗口尚未打开。

• 在“项目”工具窗口中选择所需的Gulpfile.js文件，或在编辑器中打开它，然后从上下文菜单中选择“显示 Gulp 任务” 。

从 ES6 Gulpfile.js 构建任务树

1. 转到“运行”| 编辑配置。或者，从工具栏的列表中选择编辑配置。

   

2. 在模板节点下，单击Gulp.js。

3. 在打开的“运行/调试配置：Gulp.js”--harmony对话框中，输入“节点选项”字段，然后单击“确定”。

从 Gulp 工具窗口构建任务树

• 在Gulp工具窗口中，单击工具栏上的 ，然后从列表中选择所需的Gulpfile.js文件。默认情况下，PyCharm在项目的根目录中显示Gulpfile.js文件。

• 如果您有其他Gulpfile.js文件，请单击“选择 Gulpfile.js” ，然后在打开的对话框中选择所需的Gulpfile.js文件。PyCharm 添加一个新节点，其标题上包含所选Gulpfile.js文件的路径，并在新节点下构建一个任务树。

重新构建一棵树

• 切换到需要的节点，点击工具栏上的 。

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

• 单击工具栏上的 ，从菜单中选择“排序依据”，然后选择“名称”。

  默认情况下，树按照Gulpfile.js中定义的顺序显示任务（选项定义顺序）。

运行任务

• 双击该任务。

• 在树中选择任务，然后按或从上下文菜单中选择“运行 <任务名称>” 。Enter

运行默认任务

• 选择树中的根节点，然后从上下文菜单中选择“运行默认值” 。

运行多个任务

• 使用多选模式：按住（对于相邻项目）或（对于非相邻项目）键并选择所需的任务，然后从所选内容的上下文菜单中选择“运行”或“调试” 。ShiftCtrl

导航至任务的定义

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

1. 将插入符号放在要运行的任务的定义处，然后从上下文菜单中选择“运行 <任务名称>” 。PyCharm 使用所选任务的名称创建并启动临时运行配置。

2. 要保存自动创建的临时运行配置，请将插入符号放在为其创建的任务的定义处，然后从所选内容的上下文菜单中选择“保存 <任务名称>” 。

创建 Gulp.js 运行配置

1. 转到“运行”| 编辑配置。或者，从工具栏的列表中选择编辑配置。

   

   在打开的“编辑配置”对话框中，单击工具栏上的“添加”按钮 ( )，然后从列表中选择Gulp.js。将打开“运行/调试配置：Gulp.js”对话框。

2. 指定运行配置的名称、要运行的任务（使用空格作为分隔符）、定义这些任务的Gulpfile.js文件的位置以及安装在当前项目根目录下的gulp包的路径。

3. 指定要使用的 Node.js 解释器。

   如果您选择项目别名，PyCharm 将自动使用Node.js页面上的节点解释器字段中的项目默认解释器。在大多数情况下，PyCharm 会检测项目默认解释器并填写字段本身。

   您还可以选择另一个已配置的本地或远程解释器，或者单击并配置一个新解释器。

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

运行任务

• 从工具栏上的运行/调试配置列表中，选择新创建的配置并单击它旁边的。输出显示在运行工具窗口中。

调试任务

1. 如上所述创建 Gulp.js 运行/调试配置。

2. 在编辑器中打开Gulpfile.js文件，并在必要时在其中设置断点。

3. 要启动调试会话，请从主工具栏上的列表中选择所需的调试配置，然后单击列表旁边的 或选择“运行”|“调试”。从主菜单调试<配置名称> 。

4. 在打开的“调试”工具窗口中，分析挂起的任务执行、单步执行任务等，如检查挂起的程序和单步执行程序中所述。

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

1. 通过选择“运行”|“打开运行/调试配置”对话框 在主菜单上编辑配置，然后从列表中选择所需的配置，或者通过单击并选择相关的运行配置类型来重新创建配置。

2. 在打开的对话框中，单击“启动前”区域，然后从列表中选择“运行 Gulp 任务” 。

3. 在打开的Gulp 任务对话框中，指定定义所需任务的Gulpfile.js，选择要执行的任务，并指定要传递给 Gulp 工具的参数。

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

1. 在“设置”对话框 ( ) 中，单击“工具”下的“启动任务”。CtrlAlt0S

2. 在打开的启动任务页面上，单击工具栏上的 。

3. 从列表中选择所需的Gulp.js运行配置。配置将添加到列表中。

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