为什么 CSS grunt 任务在 30 毫秒内完成，但页面重新加载需要 7 秒？

Question

我正在使用 grunt 查看我的 html 和 css 文件，并在它们发生变化时重新加载浏览器。如果我对我的 html 进行更改，页面几乎会立即重新加载，但如果我对某些 CSS 进行更改，我会在命令提示符中打印出以下内容。

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

尽管它说它在 30 毫秒内完成所有 CSS 相关任务，但页面需要将近 7 秒来重新加载新的 CSS。

谁能解释这是为什么？作为记录，我没有使用 SASS 或 LESS，只是正常的 CSS。如果需要，我可以 link 我的 Gruntfile.js。

编辑：这是我的命令提示符在 css 更改时给我的完整详细输出...

>> 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 app4.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 app4.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.

Answer 1

我找不到解决此问题的适当方法，但是如果您在监视任务下将以下内容添加到 Gruntfile 中，它可以减少一些响应时间：

  options: {
    spawn: false
  }

为什么 CSS grunt 任务在 30 毫秒内完成，但页面重新加载需要 7 秒？

Why CSS grunt tasks finishing in 30ms but page taking 7 seconds to reload?

gruntjs

livereload

grunt-contrib-watch