Gulp

Install gulp-cli globally

• In the embedded Terminal (Ctrl+`) , type:

  npm install -global gulp-cli

Install Gulp.js in a project

• In the embedded Terminal (Ctrl+`) , type:

  npm install gulp --save-dev

Open the Gulp tool window

When you build a tree of tasks for the first time during the current JetBrains Rider session, the Gulp tool window is not opened yet.

• Select the required Gulpfile.js file in the Project tool window or open it in the editor and choose Show Gulp Tasks from the context menu.

Build a tasks tree from a ES6 Gulpfile.js

1. From the main menu, select Run | Edit Configurations. Alternatively, select Edit Configurations from the list on the toolbar.

   

2. Under the Templates node, click Gulp.js.

3. In the Run/Debug Configuration: Gulp.js dialog that opens, type --harmony in the Node options field and click OK.

Build a tree of tasks from the Gulp tool window

• In the Gulp tool window, click on the toolbar and choose the required Gulpfile.js file from the list. By default, JetBrains Rider shows the Gulpfile.js file in the root of your project.

• If you have another Gulpfile.js file, click Choose Gulpfile.js and select the Gulpfile.js file you need in the dialog that opens. JetBrains Rider adds a new node with the path to the chosen Gulpfile.js file on its title and builds a tasks tree under the new node.

Re-build a tree

• Switch to the required node and click on the toolbar.

Sort the tasks in a tree by their names

• Click on the toolbar, choose Sort by from the menu, and then choose Name.

  By default, a tree shows the tasks in the order in which they are defined in Gulpfile.js (option Definition order).

Run a task

• Double-click the task.

• Select the task in the tree and press Enter or choose Run <task name> from the context menu.

Run the default task

• Select the root node in the tree, and choose Run default from the context menu.

Run several tasks

• Use the multiselect mode: hold Shift (for adjacent items) or Ctrl (for non-adjacent items) keys and select the required tasks, then choose Run or Debug from the context menu of the selection.

Navigate to the definition of a task

• Select the required task in the tree, and choose Jump to source from the context menu of the selection.

1. Position the caret at the definition of the task to run and choose Run <task name> from the context menu. JetBrains Rider creates and launches a temporary run configuration with the name of the selected task.

2. To save an automatically created temporary run configuration, position the cursor at the definition of the task for which it was created and choose Save <task name> from the context menu of the selection.

Create a Gulp.js run configuration

1. From the main menu, select Run | Edit Configurations. Alternatively, select Edit Configurations from the list on the toolbar.

   

   In the Edit Configurations dialog that opens, click the Add button () on the toolbar and select Gulp.js from the list. The Run/Debug Configuration: Gulp.js dialog opens.

2. Specify the name of the run configuration, the tasks to run (use blank spaces as separators), the location of the Gulpfile.js file where these tasks are defined, and the path to the gulp package installed under the current project root.

3. Specify the Node.js interpreter to use.

   If you choose the Project alias, JetBrains Rider will automatically use the project default interpreter from the Node interpreter field on the Node.js page . In most cases, JetBrains Rider detects the project default interpreter and fills in the field itself.

   You can also choose another configured local or remote interpreter or click and configure a new one.

   Optionally specify the environment variables for Node.js and the arguments for executing the tasks. Use the format --<parameter_name> <parameter_value>, for example: --env development. Learn more from the Gulp official website.

Run the tasks

• Select the newly created configuration from the Select run/debug configuration list on the toolbar and click the Run button () next to the list. The output is displayed in the Run tool window.

Debug the tasks

1. Create a Gulp.js run/debug configuration as described above.

2. Open the Gulpfile.js file in the editor and set the breakpoints in it where necessary.

3. To start a debugging session, select the required debug configuration from the list on the main toolbar and click next to the list or select Run | Debug <configuration name> from the main menu.

4. In the Debug window that opens, analyze the suspended task execution, step through the task, and so on, as described in Examine suspended program and Step through code.

Run a Gulp task as a before-launch task

1. Open the Run/debug configurations dialog by choosing Run | Edit Configurations on the main menu, and select the required configuration from the list or create it anew by clicking and choosing the relevant run configuration type.

2. In the dialog that opens, click in the Before launch area and choose Run Gulp task from the list.

3. In the Gulp task dialog that opens, specify the Gulpfile.js where the required task is defined, select the task to execute, and specify the arguments to pass to the Gulp tool.

   Specify the location of the Node.js interpreter, the parameters to pass to it, and the path to the gulp package.

1. In the Settings/Preferences dialog (Ctrl+Alt+S), click Startup Tasks under Tools.

2. On the Startup Tasks page that opens, click on the toolbar.

3. From the list, choose the required Gulp.js run configuration. The configuration is added to the list.

   If no applicable configuration is available in the project, click and choose Edit Configurations. Then define a configuration with the required settings on the Run/Debug configuration page that opens. When you save the new configuration it is automatically added to the list of startup tasks.