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

尽管它说它在30ms内完成了所有与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
  }

为什么CSS grunt任务在30ms完成但页面需要7秒才能重新加载？

1 个答案: