1

I can't get Grunt working on Magento 2. I'm going through the devdocs and have run the following commands to set up grunt:

$ sudo npm install -g grunt-cli
/usr/bin/grunt -> /usr/lib/node_modules/grunt-cli/bin/grunt
/usr/lib
└── grunt-cli@1.2.0 

$ sudo npm install
$ sudo npm update
$ grunt watch
Running "watch" task
Waiting...
^C

Execution Time (2017-03-20 17:24:18 UTC-0)
Total 2m 47.1s

$ grunt clean:nova
Running "clean:nova" (clean) task
>> 0 paths cleaned.

Done, without errors.


Execution Time (2017-03-20 17:27:07 UTC-0)
loading tasks  749ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 97%
clean:nova      14ms  ▇▇▇ 2%
Total 769ms

$ 

grunt watch does nothing, it just says waiting.... And while grunt clean seems to work, I'm not sure how I can verify this.

Of course I edited on of my theme's less files... app/design/frontend/Holy/nova/web/css/source/_extend.less

I have magento2 running in a vagrant box on my OSX host. I've tried running grunt on both the vagrant box & OSX host without success on either.

However, the server side less compilation is working, it was before I tried to try grunt. I can see my less changes take effect once I clear the cache with:

php bin/magento cache:clean; php bin/magento cache:flush; rm -rf pub/static/frontend/Monsoon/nova/en_IE/ ; rm -rf var/view_pre

processed/

I'm not sure what the advantage is with using grunt in my workflow if the server compiles the less files. Just trying to get a grip of Magento2.

  • I think its working. Grunt will trigger only when you make some changes into your less file. It will automatically appear. – Abhishek Panchal Mar 20 '17 at 17:54
  • Have you added your nova theme into dev/tools/grunt/configs/themes.js ? Also have write permissions to var/view_preprocessed. grunt clean:nova` 0 paths cleaned ? – obscure Mar 20 '17 at 19:48
  • grunt clean:nova should be followed by grunt exec:nova. grunt watch listens on theme .less file changes and does grunt less:nova. devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/… – obscure Mar 20 '17 at 20:01
3

It appears to be working.

grunt clean will clean (and remove) the old css/less files and grunt compile will compile the css to less and then grunt watch will run in the background - updating your css/less as you make changes and save.

My normal routine is grunt exec static:content-deploy grunt clean grunt watch

  • does the console not update with a message once it recompiles to show it's working? – Holly Mar 20 '17 at 19:26
  • It does updated - If you use grunt exec/ grunt clean / grunt less / grunt compile / grunt watch all update the CLI with a status of the work. – Rebel Mar 21 '17 at 16:27
2

In the end I just needed to run grunt exec before running grunt watch for it to work

$ grunt exec:nova
Running "exec:nova" (exec) task
Running "clean:nova" (clean) task
>> 290 paths cleaned.

Done, without errors.


Execution Time (2017-03-20 22:02:04 UTC-0)
loading tasks  1.2s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 35%
clean:nova     2.2s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 64%
Total 3.4s

Processed Area: frontend, Locale: en_US, Theme: Holy/nova, File type: less.
-> css/styles-m.less
-> css/styles-l.less
Successfully processed.

Done, without errors.


Execution Time (2017-03-20 22:02:02 UTC-0)
loading tasks   1.2s  ▇▇▇▇ 3%
exec:nova      42.4s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 97%
Total 43.6s

$ grunt watch
Running "watch" task
Waiting...
>> File "pub/static/frontend/Holy/nova/en_US/css/source/_extend.less" changed.
Running "less:nova" (less) task
File pub/static/frontend/Holy/nova/en_US/css/styles-m.css created: 333.74 kB → 574.1 kB
File pub/static/frontend/Holy/nova/en_US/css/styles-l.css created: 80.3 kB → 138.35 kB

Done, without errors.


Execution Time (2017-03-20 22:03:33 UTC-0)
loading tasks                2.9s  ▇▇▇▇▇▇▇ 5%
loading grunt-contrib-less  859ms  ▇▇ 1%
less:nova                   58.3s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 94%
Total 1m 2.2s

Completed in 65.223s at Mon Mar 20 2017 22:04:35 GMT+0000 (UTC) - Waiting...

Have to say this workflow is very slow. I wonder is there anyway to enable source maps for Magento 2's less files.

  • It does feel really slow if you are making CSS edits. I have heard that pulling the site down to your local machine should speed up the task however I havent had the time to confirm this for myself. I find that if I am going to be making a lot of CSS adjustments then I keep a text editor open and use the inspector on the frontend to find the needed adjustments and transfer those statements to the text editor. Once Im happy or find a stopping point I transfer the CSS from the text editor to the required CSS file and run my Grunt dance. – Rebel Mar 21 '17 at 16:31

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.