Grunt in WebStorm 8

John Lindquist

Grunt is a very popular tool in the JavaScript community. It’s built on top of Node.js, but it’s used even in most front-end only projects. So even if you don’t work with Node.js, many JavaScript developers install Node.js simply to use Grunt.

Grunt can achieve many common tasks such as minifying code, linting code, and transpiling code (e.g., changing CoffeeScript into JavaScript). The most common scenarios are achieved by using Grunt plugins which are installed through npm. In fact, developers often simply create Gruntfile (a build file written using Grunt) that only uses common plugins and then they simply configure it with settings to match their own projects.

WebStorm helps you to run Grunt tasks.


Simply right-click on your Gruntfile, select Show Grunt Tasks and you’ll now be able to double-click a task in the Grunt tool window to run it.


In order to get started, you’ll want to install Grunt’s command line interface (CLI) globally. You may need to use sudo (for OS X, *nix, BSD etc) or run your command shell as Administrator (for Windows) to do this (you can find more on Getting started with Grunt on
npm install -g grunt-cli

Please watch the video below for more details:

Develop with pleasure!
JetBrains WebStorm Team

Comments below can no longer be edited.

24 Responses to Grunt in WebStorm 8

  1. Daniel Sedlacek says:

    June 3, 2014

    You just couldn’t do this any faster, could you? Yeah, you know what you are doing and its easy, right? But guess what, people watching this tutorial DON’T KNOW what you are going and will not learn it from you invoking windows with key shortcuts and magically clicking on magical things! What did you click on 0:22? Where did that window at 0:38 come from? Arrrggghhh!

    • Ekaterina Prigara says:

      June 3, 2014

      Hello Daniel,
      John uses Search everywhere (double Shift) to access WebStorm preferences: on 0:22 he searches for Node.js and npm (could be accessed in Preferences | Node.js and npm) to install Grunt module, then on 0:38 he goes to Preferences | JavaScript Libraries to download TypeScript community stubs to improve code completion for Grunt.

    • Bob Arndt says:

      June 13, 2014

      Unfortunately I have wondered about the same thing in watching many of John’s “tutorials”. He sure knows his stuff, but unless you are on his level, the videos are completely worthless. It is to the point that you really wonder about his motives. Does he want to show off, or genuinely inform about JetBrains products.

      • Andrey says:

        July 20, 2014

        +1 Another useless video =(
        I created GruntFile.js, installed grunt (npm install grunt in Terminal) refresh and got:

        ‘grunt.cmd’ is not recognized as an internal or external command,
        operable program or batch file.

        grunt v0.4.5

        • Andrey says:

          July 20, 2014

          Yeah, he forgot to mention that we should also install grunt-cli (npm install -g grunt-cli).

          I think you should try to make all stuff yourself before release video!

          • Ekaterina Prigara says:

            July 21, 2014

            We do try to make all stuff ourselves, but we also assume that at some point our users check the website with installation guides for the technologies they use. We’ll update the post with Grunt installation steps. Thanks for pointing that out.

  2. fisher says:

    June 5, 2014

    whether this feature will be available in PhpStorm?

  3. wille says:

    June 10, 2014

    Is their a keyboard shortcut for the Grunt console?

    • Ekaterina Prigara says:

      June 10, 2014

      Right now you could only assign a keyboard shortcut to open Grunt console (Preferences | Keymaps).
      There is also a request to assign a shortcut to run a default task, I encourage you to vote for it or create new requests for any other actions you’re missing.

  4. kashesandr says:

    June 23, 2014

    Hey. I’ve realized that there is no code completion and highlighting for It does work fine for Gruntfile.js.

  5. thataintworking says:

    August 12, 2014

    When will this be available in PyCharm?

    • Ekaterina Prigara says:

      August 13, 2014

      As soon as the Early access program for the next PyCharm version starts, I don’t have any info on that.

  6. foobar8675 says:

    October 13, 2014

    If I use grunt to run my app, is it still possible to debug in webstorm?

    • Hadi Hariri says:

      October 13, 2014

      You can create a Run/Debug configuration of any Grunt task, or just setup the debug. So in principle it’s pretty independent

      • Alex says:

        October 21, 2014

        I don’t see any options of creating configuration of Grunt task in PhpStorm 8.0.1. Is it available only in WebStorm?

        • Hadi Hariri says:

          October 21, 2014

          Please update the JavaScript plugin shipped with PhpStorm.

  7. Tom Gibson says:

    October 22, 2014

    When will this be available in idea?

    • Ekaterina Prigara says:

      October 22, 2014

      Grunt integration is available in IntelliJ IDEA 13.1 and up.

  8. dd says:

    November 11, 2014

    I have latest IDEA on Mac, went to IDEA / Preferences / Plugins / Install JetBrains Plugin and searched for Grunt and got no results. I searched on the IntelliJ Plugins for IDEA web page and found nothing named “Grunt”.

    Where & how do I find this and install it?

    • Ekaterina Prigara says:

      November 12, 2014

      Grunt integration is part of JavaScript support plugin that is bundled with IJ 14. Right click on your gruntfile.js and select Open Grunt Console.

  9. Gulp in WebStorm 9 | JetBrains WebStorm Blog says:

    November 24, 2014

    […] 8 introduced Grunt console (you can read about it in this blog post), and now WebStorm 9 brings integration with […]

  10. Craig says:

    March 30, 2015

    Grunt is working great, however after it files all the files, PHPStorm 8 isn’t recognizing them as changed immediately. I have to open the files that have been built before they are synchronized. This be comes a problem when I want to commit to git after a grunt watch task. Git doesn’t recognize the files as changed, and really disrupts my work flow.

    How can I make sure the files are reloaded “synchronized” after a grunt compile?