Grunt in WebStorm 8

Grunt is a very popular tool in the JavaScript community. It’s built on top of NodeJS, but it’s used even in most front-end only projects. So even if you don’t work with NodeJS, many JavaScript developers install NodeJS 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 (e.g., writing a config.json file).

WebStorm 8 now helps you to run Grunt tasks.

Simply right-click on your GruntFile, select Open Grunt Console, 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 OSX, *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 gruntjs.com.

Please watch the video below for more details:

Develop with pleasure!
JetBrains WebStorm Team

This entry was posted in Cool Feature and tagged . Bookmark the permalink.

22 Responses to Grunt in WebStorm 8

  1. Daniel Sedlacek says:

    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:

      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:

      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:

        +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:

          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:

            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:

    whether this feature will be available in PhpStorm?

  3. wille says:

    Is their a keyboard shortcut for the Grunt console?

    • Ekaterina Prigara says:

      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:

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

  5. When will this be available in PyCharm?

    • Ekaterina Prigara says:

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

  6. foobar8675 says:

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

  7. Tom Gibson says:

    When will this be available in idea?

  8. dd says:

    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:

      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. Pingback: Gulp in WebStorm 9 | JetBrains WebStorm Blog

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">