1

The short: Whenever I work on my front-end CSS with grunt watch it takes about 13~16 seconds to complete the less task to compile the .less files to css. This is for every save and needless to say it's killing my productivity.

The setup: Magento 2.1.2 is running in developer mode, server-side less compilation on a adequate VPS which shouldn't be the problem. My theme is a child-theme of the default Blank theme, and this is my grunt-config

EN2017: {
    area: 'frontend',
    name: 'Engels/EN2017',
    locale: 'nl_NL',
    files: [
        'css/styles-m',
        'css/styles-l'
    ],
    dsl: 'less'
},

I have a web/css/source/extend.less with 15 @import of smaller .less files in the web/css/ folder of my theme.

The debug: Here's a log with grunt-timer when I open 1 .less file, edit 1 character and save it, while running grunt-watch

Task 'loading grunt-contrib-watch' took 123ms
Running "watch" task
Waiting...
>> File "pub/static/frontend/Engels/EN2017/nl_NL/css/en_base.less" changed.
Task 'loading grunt-contrib-less' took 122ms
Running "less:EN2017" (less) task
File pub/static/frontend/Engels/EN2017/nl_NL/css/styles-m.css created: 321.99 kB → 552.41 kB
File pub/static/frontend/Engels/EN2017/nl_NL/css/styles-l.css created: 88.14 kB → 150.83 kB

Done.


Execution Time (2016-12-09 11:04:30 UTC+1)
loading tasks  342ms  ▇▇ 3%
less:EN2017      12s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 96%
Total 12.5s

Task 'less:EN2017' took 12045ms
All tasks took 12167ms
Completed in 13.339s at Fri Dec 09 2016 11:04:42 GMT+0100 (CET) -  Waiting...

As you can see this single edit takes more then 13s. Most of these (with a little more actual editing) take between 15s and 17s. This shouldn't be normal, I think. I've talked it through with our sysadmin, but he couldn't find anything server related. He did find that the styles-m.css file took the longest and he pinned it on the large amount of files that it includes. But this is default Magento stuff, and shouldn't be the problem, right?

So what is? Is there something off about my configuration or is it a server-thing still?

0

I've been working with Magento 2.1.x for some time now and this question also came to my mind. In my projects less compilation takes about 20s, which is a huge amount of time in my opinion. Earlier I've been working with Gulp on some smaller projects and less compilation (+ some additional tasks) was usually taking less than 1s.

Working with Magento, we have to remember that this is a huge, complex system. When you, as you said, add just one character to your .less file and then save it, it has to do it's job with far more files.

When your theme is inheriting from, let's say, Magento/Blank, then preprocessor has to look into your theme's files - take it's code, variables, mixins, etc., then look to it's parent theme and do the same and if exists it's parent's parent, etc.

If you edit your-file.less it is not compiled into your-file.css but it is implemented into styles-m.css and/or styles-l.css.

If there is a way to improve this, I would really like to hear from anyone who came with an answer.

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.