0

I'm using grunt to watch my html and css files and reload the browser when they change. If I make a change to my html, the page reloads almost instantly, but if I make a change to some CSS, I get the following print out in my command prompt. 

Execution Time (2015-03-10 16:02:07 UTC)
loading tasks                                        5ms  █████████ 17%
newer:copy:styles                                   10ms  █████████████████ 33%
copy:styles                                          8ms  ██████████████ 27%
newer-postrun:copy:style...ules\grunt-newer\.cache   6ms  ██████████ 20%
Total 30ms

Despite it saying it finishes all the CSS related tasks in 30ms, the page takes almost 7 seconds to reload the new CSS.

Can anyone explain why this is? For the record, I am NOT using SASS or LESS, just normal CSS. I can link my Gruntfile.js if needs be.

EDIT: This is the complete verbose output my command prompt gives me on a css change...

>> File "app\styles\main.css" changed.

Running "newer:copy:styles" (newer) task
Options: cache="C:\\Users\\Code\\node_modules\\grunt-newer\\.cache", override=undefined
Files: app/styles/main.css -> .tmp/styles/main.css

Running "copy:styles" (copy) task
Verifying property copy.styles exists in config...OK
Files: app/styles/main.css -> .tmp/styles/main.css
Options: encoding="utf8", processContent=false, processContentExclude=[], timestamp=false, mode=false
Copying app/styles/main.css -> .tmp/styles/main.css
Reading app/styles/main.css...OK
Writing .tmp/styles/main.css...OK
Copied 1 file

Running "newer-postrun:copy:styles:7:C:\Users\Aaron\Dropbox\Projects\mPathway\Code\node_modules\grunt-newer\.cache" (newer-postrun) task
Writing C:\Users\Aaron\Dropbox\Projects\mPathway\Code\node_modules\grunt-newer\.cache\copy\styles\timestamp...OK

Running "watch" task
Verifying property watch exists in config...OK
Verifying property watch.bower.files exists in config...OK
Verifying property watch.js.files exists in config...OK
Verifying property watch.jsTest.files exists in config...OK
Verifying property watch.styles.files exists in config...OK
Verifying property watch.gruntfile.files exists in config...OK
Verifying property watch.livereload.files exists in config...OK
Completed in 0.047s at Thu Mar 12 2015 13:00:24 GMT+0000 (GMT Standard Time) - Waiting...
Watching bower.json for changes.
Watching .tmp for changes.
Watching app for changes.
Watching bower_components for changes.
Watching dist for changes.
Watching node_modules for changes.
Watching test for changes.
Watching app\scripts\app.js for changes.
Watching app\scripts\controllers for changes.
Watching app\scripts\controllers\main.js for changes.
Watching test\spec\controllers\main.js for changes.
Watching app\styles\main.css for changes.
Watching Gruntfile.js for changes.
Watching .tmp for changes.
Watching app for changes.
Watching bower_components for changes.
Watching dist for changes.
Watching node_modules for changes.
Watching test for changes.
Watching app\404.html for changes.
Watching app\images for changes.
Watching app\scripts for changes.
Watching app\styles for changes.
Watching app\views for changes.
Watching app\index.html for changes.
Watching app\views\main.html for changes.
Watching .tmp\styles\main.css for changes.
Watching app\images\yeoman.png for changes.
>> File ".tmp\styles\main.css" changed.

Running "watch" task
Verifying property watch exists in config...OK
Verifying property watch.bower.files exists in config...OK
Verifying property watch.js.files exists in config...OK
Verifying property watch.jsTest.files exists in config...OK
Verifying property watch.styles.files exists in config...OK
Verifying property watch.gruntfile.files exists in config...OK
Verifying property watch.livereload.files exists in config...OK
Live reloading .tmp\styles\main.css...
Completed in 0.030s at Thu Mar 12 2015 13:00:26 GMT+0000 (GMT Standard Time) - Waiting...
Watching bower.json for changes.
Watching .tmp for changes.
Watching app for changes.
Watching bower_components for changes.
Watching dist for changes.
Watching node_modules for changes.
Watching test for changes.
Watching app\scripts\app.js for changes.
Watching app\scripts\controllers for changes.
Watching app\scripts\controllers\main.js for changes.
Watching test\spec\controllers\main.js for changes.
Watching app\styles\main.css for changes.
Watching Gruntfile.js for changes.
Watching .tmp for changes.
Watching app for changes.
Watching bower_components for changes.
Watching dist for changes.
Watching node_modules for changes.
Watching test for changes.
Watching app\404.html for changes.
Watching app\images for changes.
Watching app\scripts for changes.
Watching app\styles for changes.
Watching app\views for changes.
Watching app\index.html for changes.
Watching app\views\main.html for changes.
Watching .tmp\styles\main.css for changes.
Watching app\images\yeoman.png for changes.
aadu
  • 3,196
  • 9
  • 39
  • 62
  • 1
    This isn't strictly a CSS issue, specifically a grunt issue. – Jack hardcastle Mar 10 '15 at 16:10
  • @Jack removed the css tag – aadu Mar 10 '15 at 16:13
  • how are you measuring 7 seconds to load the css? – Matthew Kime Mar 10 '15 at 19:39
  • @Matthew Well for one thing I just make the change and start counting, but also it says in the cmd after 'Total 30ms', 'Completed in 6.725s – aadu Mar 11 '15 at 11:30
  • @AzzyDude can you post the output including the grunt time output you've already shown through to where it states the completed time? the info provided isn't enough to solve the problem and this will probably take a little back and forth which is fine, i'm patient. – Matthew Kime Mar 11 '15 at 15:47
  • @Matthew I have updated my question with a full print out of my command prompt after making one CSS change. Please note at the bottom where it says 'completed in 5.626s'. I do not understand why it is so long when all the tasks finish so quickly. – aadu Mar 11 '15 at 16:04
  • @AzzyDude - yeah, thats a mystery alright. some ideas - what tasks are you running on the css file change? are they in turn running other tasks? you can also try running with the flag "--verbose" for verbose mode. that might reveal some secrets. – Matthew Kime Mar 11 '15 at 18:05
  • There are two tasks occurring on a css change. 'newer:copy:styles' and 'autoprefixer'. I've commented out 'autoprefixer' and it didn't really help. Is there anything I can do to 'newer:copy:styles'? Tweak it? – aadu Mar 12 '15 at 11:11
  • I've edited my question again and added the complete verbose output for one css change. Do you see anything out of the ordinary? I turned on spawn: false in my gruntfile and it seems to have helped very slightly – aadu Mar 12 '15 at 13:57

1 Answers1

0

I could not find an adequate solution to this problem, however if you add the following to your Gruntfile under the watch task, it can alleviate some of the response time:

  options: {
    spawn: false
  }
aadu
  • 3,196
  • 9
  • 39
  • 62