6

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.

7

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
  • Yes, that's the correct grunt commands order. I'll mark your response as answear. Would you please add how to make PhpStorm to open a browser window after grunt watch task finished in PhpStorm ? – obscure Jun 9 '16 at 13:33
  • You want to open your browser to the url said the project? Or you want to make your CSS refresh the page already open in your browser? If you want to make css browser refresh, you want to do with Grunt or a browser addon? – St3phan Jun 9 '16 at 13:56
  • I need to update the post. Nvm – obscure Jun 9 '16 at 13:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.