Magento 2. Less to CSS. Very slow building process. How to improve?

Question

Currently magento2/grunt is very slow in transforming less to css (with a few locales it can take up to a minute to rebuild everything.

Any tips how to improve development speed?

Answer 1

I am also fronted developer and facing same problem, it's because of server side compilation mode.

Please try following method, may be it's helpful and you don't need grunt cmd also so it's save your time also

go to

store > Configuration > Advanced > Developer > Front-end development workflow 

and change workflow type to Client side less compilation

Now go to your Magento installed directory and manually delete following folders

 1. pub\static\frontend\Magento  (remove all theme folders)

 2. var\ (remove all items)

now edit any less file and check it.

no need to run any grunt CMD direct Refresh your browser may be it's working fine.

also please install below add-on in firefox

https://addons.mozilla.org/en-US/firefox/user/simonedeponti/?src=api

it's show you direct less file path in browser when you inspect elements.

I think it's better way to save time.

Answer 2

If you are working on an individual page then client-mode less is a good option.

If you are working on multiple pages on a site then this is very slow as it compiles the less each time you hit a page.

In the latter case you are better off using server-mode and using Gulp to compile the less for you whenever there is a change. This is faster than Grunt, thoguh there are restrictions (primarily not using _import.less files in extensions which rely on the non-standard @magento_import commands). This also includes a live-reload option for your browser.

Details for setting up Gulp for Magento 2 can be found on Alan Kent's blog.

Answer 3

You can use this gulpfile: https://github.com/magenio-it/magento2-gulp

if you don't need any special tools it should be fine and you can try the "superwatch" task that I created to avoid running an exec command with each new file added :)