Run Gulp Tasks from PhpStorm

I would like to show you how I deal with gulp tasks in phpStorm where I use the “Gulp Task Runner” to execute gulp tasks.

This task runner is integrated into phpStorm as a debug utility. This means it can be found in the upper right corner of the screen where there is a “Play” button, a debug one and a listen button (which can be used in cases where you need to listen for an action from your browser). This is how it looks when you don’t have any tasks configurated (note that the “Play” button is disabled because there is no task to play): 

This debugging tool is very powerful. Even if we won’t discuss it here, it is good to know that you can create different types of tasks for debugging PHP, Node.js. JavaScript or run tests with PHPUnit, Behat, Karma as you can see in this image:

For now, we will only play with the “Gulp Task Runner” (there is also an alternative for Grunt fans).

I assume you already have a “gulpfile.js” file in your project since you are reading this article, but even if you don’t, you can start to use Gulp by reading the gulp documentation.

To provide you with a test case I will use a “gulpfile.js” which we use at PixelGrade in our WordPress themes to execute some simple tasks as:

• compile SCSS files to CSS files
• concatenate all the development javascript files into a single minified one
• to create a clean .zip archive from the development version.

Until now we’ve executed these actions via Terminal and it was pretty useful because is more fun to write in your terminal “gulp zip” inside your project and then simply get a production zipped version of your project instead of cleaning and archive manually the development version.

As a PHPStorm user, I will go even further with the automation, I will run these gulp tasks with a simple click. To configure a gulp task you need to click on that arrow in the upper right corner of the PhpStorm project and do it like this:

Let’s Create Our First Task

Now let’s configure our first task: creating a production zip archive.

The first field that you need to edit is the name – I would suggest you to pick-up the subject of the task and the action like this “Theme – Create ZIP”. Personally I add a prefix to my tasks because, in the same project, I can have tasks for a WordPress theme or a plugin.

In the next field, you can select the gulp file that contains all your gulp functions. Just click on the “…” button and choose the path to your file.

Now the magic should already happen, if you have a valid gulpfile.js in the third field, you should already be able to select your gulp task – mine is “gulp zip” so there should be only the “zip” string.

The next fields are optional – put arguments if you have some. If you have installed Node.js and Gulp correctly, the paths for these utilities should be added automatically.

That is it, hit the “OK” button from the bottom right and you have setup a Gulp Task Runner.

To use it go to the upper corner of the screen and click the “Play” button like this:

A debug panel should appear for you in the bottom of the screen with the output of your action and your task should be already executed. Congrats!

Now nothing stops you from creating more tasks for your daily actions. For example, I have this task list for a WordPress theme:

• Theme – Style – Compiles the SCSS files into CSS ones
• Theme – Scripts – In development we do split our javascript functions in files so we have a proper management for them, but in the production, all files are concatenated into a single one; we run a beautify on it and check it for errors; that’s what this task does.
• Theme – Start – this task runs the other two above. Imagine that a new contributor comes in our theme. He only needs to clone a repo from GitHub, install all the gulp dependencies, and run this task, now he has a WordPress theme ready to play with.
• Theme – Watch –  this task is waiting for a file to be edited (a .js or a .scss file) and then runs the Theme – Start task. This very useful because you don’t have to do these actions every time you edit a file; NO, you simply run this task and start developing.
• Plugin Name – Actions – I also have the above tasks for each WordPress plugin I develop.
• Install gulp – Ok, this may seem like overkill, I’m creating a task that simply runs “npm install” in my project. This action simply installs all the gulp dependencies and usually you do it only once. This deals with following scenario: when you work in a team and a colleague may install a new gulp module he doesn’t install it in your environment also, and then you get the “missing” error.
  I only use this task as a pre-task, so I call this before launching any gulp-compiling actions. It just ensures me that I always have all the dependencies with the risk that all my tasks will be 1.2 seconds longer.

Theme Name – Server Update

Well, this task is kinda fun, and I think it needs a separate section.

This runs a task on a remote server – yes, if I play this task is gonna connect to the development server’s SSH (or a demo one) and executes some terminal commands such as:

• git stash – stash the local files
• git pull origin – get the latest files on that server run the
• run the Theme – Start task.

Each of the above actions are created with a Remote External Tool (this link explains it enough), and after that in a single gulp task runner I link it with the “Before launch tool” like this:

In conclusion:

We could find many others utilities for these tools, beside the Remote External Tool there are also tools like File Watchers or External Tools – we just need some inspiration to create some awesome “time savers” tools. In case you need homework, this would work 😀

Thank you for reading and if you found this useful or interesting I guess you have a new toy to play.

Have fun!