为什么 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。如果需要，我可以链接我的 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 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.

Answer 1

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

  options: {
    spawn: false
  }