Magento 2 - How to configure Grunt in PhpStorm

Question

I'm trying to configure Grunt in PhpStorm.

I have set for Grunt: Node interpreter: /usr/bin/node (exists) Package grunt-cli: [path to Magento 2 dir]

I get the error bellow when I 'Reload tasks' in PhpStorm.

grunt-cli is installed in the project. I have a [path to Magento 2]/node_modules/ dir. And grunt clean:[my theme], exec and watch work in console.

I'm aiming to have PhpStorm run grunt watch and refresh the page in browser.

Failed to list grunt tasks in [magento2 dir]/Gruntfile.js: process finished with exit code 8 (a non-zero exit code means an error)
 * Edit settings

$ /usr/bin/node /[magento2 dir]/dev/tools/grunt/tasks/bin/grunt --no-color --verbose --gruntfile /[magento2 dir]/Gruntfile.js --tasks /home/[user]/[some-dir]/PhpStorm/plugins/JavaScriptLanguage/grunt_js/tasks _intellij_grunt_tasks_fetcher

module.js:340
    throw err;
          ^
Error: Cannot find module '/[magento2 dir]/dev/tools/grunt/tasks/bin/grunt'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:902:3

Process finished with exit code 8

EDIT Settings that worked with Grunt are:

• Node interpreter: /usr/bin/node (exists)
• Package grunt-cli: /usr/local/lib/node_modules/grunt-cli

and clicked 'Reload Tasks' icon

EDIT 2 Assuming one configured the project as in: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html#grunt_prereq and has configured also the store them in [magento2 dir]\dev\tools\grunt\configs\themes.js

Add a File Watcher in Settings > Tools > File Watchers as explained here: http://www.kevinfodness.com/automating-grunt-builds-in-phpstorm with a few differences:

• 'File Type': Less
• In 'Scope' there should be the directory of your theme from vendors/[my namespace]/[my theme dir] because we suppose to change files here. I have added a few more dirs from vendors/[my namespace]/[my modules that have less]
• In 'Scope' you don't need to Exclude .css files because these are in pub/static and not in vendors/my_namespace/my_theme dir.
• 'Program': grunt (my dev machine sees this command globally)
• 'Arguments': less:my_theme
• I could have in 'Arguments' this instead: clean:my_theme exec:my_theme less:my_theme but not sure if I want to. less:my_theme takes already 5 secs to run. You can run clean and exec in console if you need it.
• 'Outputs path to refresh': I've cleaned it. Nothing here instead of the default field value.

I have set up the watcher and it works. But now I'm thinking why not just use grunt watch in console. Next step is to find out how PhpStorm can refresh a browser window after it completes the watcher's task. This is why I want to have Grunt in PhpStorm. I don't want to alt+tab in console to see if grunt watch finished the task and than alt+tab to refresh a browser window.

Answer 1

Magento2 Grunt Documentation

Install NodeJs in your pc

Use comand line:

• Install Grunt CLI tool globally

npm install -g grunt-cli

* Install the node.js project dependency

npm install

* Remove Magento Cache

php bin/magento cache:clean

* Clean compiled files by command

grunt clean

* Run CMD command prompt with administrator privilege.

grunt exec:yourthemename
grunt less:yourthemename
grunt watch

https://drive.google.com/a/green-art.ro/file/d/0B_3mauXj4AQINXVoTXlBT2JSUjA/view?usp=sharing

---

If that does not work grunt watch during development or run software from Php Storm roll back the following commands:
* Remove Magento Cache

php bin/magento cache:clean

* Clean compiled files by command

grunt clean

* Run CMD command prompt with administrator privilege.

grunt exec:yourthemename
grunt less:yourthemename
grunt watch