Iām on a Windows system and when I have livereload enabled via grunt watch it works, but itās god awful slow. My current workflow is edit the LESS files, save, wait 3-4 seconds for Grunt to do itās magic and then watch the browser reload. I see a FOUC and then the site. So around 6-10 seconds for each edit. Seldom, it seems my PC works properly and it reloads quickly, in under a second and with no FOUC. Then it seems to bog down and go slow after a few reloads. This is very frustratingā¦ Iām trying to get faster and more effecient using LESS and Grunt. Right now it seems I was much faster doing plain vanilla CSS.
Has anyone had this issue? And if so, how did you fix it? Does livereload perform much faster on Mac/Linux? Iām trying to āsee the lightā with LESS/Grunt but itās been frustrating. Any help or insight is appreciated.
Canāt say Iāve seen anything like that in Linux. I would ask what your computer specs are, but Iām not sure if thatās your issueā¦
When you run grunt watch, I assume itās from the command line. Do you see the output as it works? Also, what browser are you using? I Dev in Chrome and live reload seems to be pretty quick
Itās not the computer. Itās pretty fast. Itās around 2-3 seconds for grunt to run all the tasks and then 2-3 seconds for Chrome to reload. I see a FOUC and then the site loads. Is this normal times?
Nope not at all. Compile times, might be correct, but I think my computer compiles in Linux in 1-2 seconds. But the page should refresh almost instantaneously.
Again, does your command line show whatās happening? And what browser are you running?
Iāve noticed this as wellā¦ but a small percentage of the time it doesnāt happen. Comparing the grunt watch output, when I get a good quick reload without the FOUC it lists just the reload for main.min.css, and not both main.min.css and scripts.min.js.
... Reload assets/css/main.min.css ...
vs.
... Reload assets/js/scripts.min.js ...
... Reload assets/css/main.min.css ...
Seems like a simple solution is to remove the JS tasks when mostly focusing on CSS updates.
ISSUE #1
I have the exact same issue on Mac (kinda slow, 4-5s to compile and refresh + FOUC). Did you find anything helpful regarding that issue? The FOUC thing is annoying and it is systematic.
ISSUE #2
Also, once the watch task is running, as long as I only edit the .less files and switch to my browser window to see the result, grunt will compile the less to css and then āINJECTā the css into the HTML (=no page reload), which is pretty cool and super fast. Then, as soon as I edit a PHP or JS file, itāll take a page reload which is normal. BUTā¦ after that it will always reload the page, no more āinjectionā, even though I only edit .less files again (and no .php or .js). The only solution I found to get back to the ācss injection without page reloadā was to stop the watch task and restart it. WOULD YOU KNOW ABOUT ANOTHER WAY TO ACHIEVE THIS?
Thanks for help, community.
Oh, wow. Getting terrible results with Grunt here aswellā¦
Just running the basic grunt watch with these results:
Waiting...OK
>> File "assets/less/app.less" changed.
Running "less:dist" (less) task
File assets/css/main.min.css created.
Running "version" task
Versioning assets/css/main.min.css...OK
Versioning assets/js/scripts.min.js...OK
"lib/scripts.php" updated with new CSS/JS versions.
Done, without errors.
Completed in 7.714s at Thu Mar 27 2014 22:26:31 GMT+0000 (UTC) - Waiting...
This is inside a VM, so I went and upped ram to 2GB and allowed usage of 4 cores and got this:
Running "watch" task
Waiting...OK
>> File "assets/less/app.less" changed.
Running "less:dist" (less) task
File assets/css/main.min.css created.
Running "version" task
Versioning assets/css/main.min.css...OK
Versioning assets/js/scripts.min.js...OK
"lib/scripts.php" updated with new CSS/JS versions.
Done, without errors.
Completed in 40.480s at Thu Mar 27 2014 22:33:11 GMT+0000 (UTC) - Waiting...
Not sure if I should laugh or cry 
If youāre using Vagrant and on an OS X host, try using NFS for the synced folders: https://docs.vagrantup.com/v2/synced-folders/nfs.html
Performance should be better!
1 Like
Right you are, it cut the loading down to 2s. Is this what I should be looking at?
I turned the VM spec down to 512MB and 1 core again (for some reason the fans of my MPB started to throttle when I changed the spec and got the 40s load time).
Even locally on a beast of a machine I get around 2s so I doubt youāll ever get much less than that (although I havenāt actively tried to improve it).
Couple more things you can try: https://github.com/gruntjs/grunt-contrib-watch#why-is-the-watch-devouring-all-my-memorycpu
And you can see timing breakdowns with https://github.com/sindresorhus/time-grunt
1 Like
For strictly css this is the fastest liveReload tool I have used fwiw.
http://livereload.com/
I usually disable grunt / sass when working with roots based sites