Magento 2 – How to Configure Grunt in PhpStorm

gruntmagento2phpstorm

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.

Best Answer

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

Related Solutions

Magento – How to Configure Magento2 with Gulp instead Grunt

I personally use this simple gulpfile.js to process my css to the pub folders.

// Load gulp and plug-ins
var gulp    = require('gulp'),
    jshint      = require('gulp-jshint'),
    less        = require('gulp-less'),
    concat      = require('gulp-concat'),
    uglify      = require('gulp-uglify'),
    rename      = require('gulp-rename'),
    gutil       = require('gulp-util'),
    livereload  = require('gulp-livereload'),
    sourcemaps  = require('gulp-sourcemaps');


// Generate less to CSS.
gulp.task('less', function() {
    return gulp.src(['app/design/frontend/Vendor/theme/web/css/theme.less'])
        .pipe(less())
        .pipe( sourcemaps.write() )
        .pipe( livereload() )
        .pipe(gulp.dest('pub/static/frontend/Vendor/theme/nl_NL/css'))
        .pipe(gulp.dest('pub/static/frontend/Vendor/theme/de_DE/css'))
});


// Watch Files For Changes and livereload
gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('app/design/frontend/Vendor/theme/web/css/**/*.less', ['less']);
});


gulp.task('default', ['less']);

Magento – Can’t trace code in PHPStorm

Namespace root is your most likely problem. PhpStorm absolutely supports the feature you're looking for, and it should work out of box.

Make sure your project encompasses the entire source code, then tell PhpStorm where to go looking, if it wasn't able to work it out on its own. See: https://www.jetbrains.com/help/phpstorm/2016.1/configuring-php-namespaces-in-a-project.html#d140255e161

Configuring Namespace Roots Manually

Open the Settings / Preferences Dialog by choosing File | Settings for Windows and Linux or PhpStorm | Preferences for OS X, and click Directories under Project:. The right-hand pane of the Directories page that opens shows all the content roots configured in the project. As a rule, there is one content root which is the root folder of the current project.

The central pane shows all the folders under the selected content root. Select the folder to be treated as the namespace root and click Sources.

It is perfectly fine to configure multiple source roots: PhpStorm will treat each of those as a namespace root and provide namespace hints for files underneath them. For example every subfolder of a vendor folder can be marked as a namespace root. In the example below, we have two namespace roots: one for the actual application and one for a vendor folder

At minimum, you want to set the 'vendor' folder as Sources, plus the app/code folder if it exists. Under normal circumstances, every module (and namespace) should be within those two locations.

Best Answer

Magento2 Grunt Documentation

Related Solutions

Magento – How to Configure Magento2 with Gulp instead Grunt

Magento – Can’t trace code in PHPStorm

Related Topic