Gulp JS with live reload - 什麼被重新加載

我正在使用gulp.js和Chrome擴展liveareload測試Livereload。我gulpfile.jsGulp JS with live reload - 什麼被重新加載

// gulpfile.js 
var gulp = require('gulp'), 
    livereload = require('gulp-livereload'); 

gulp.task('watch', function() { 
    var server = livereload(); 

    gulp.watch(['dist/**']).on('change', function(file) { 
     server.changed(file.path); 
    }); 
});

在dist文件夾中，有5個文件

index.html（主頁）
app.css（CSS從index.html的鏈接）
app.js（JavaScript的鏈接from index.html）
include.html（angularjs partial ng-included in index.html）
unrelated.html（未由index.html或任何其他文件使用）。

當我編輯任何文件時，瀏覽器會完全重新加載index.html，導致狀態丟失。例如，無論在文本輸入中輸入的內容是否被刪除。唯一的例外是當我編輯CSS文件。當我編輯（1），並且只編輯（2）時沒有完整頁面重新加載的CSS注入時，我理解並期望完整頁面重新加載，但我不確定這是否是預期的行爲3），（4）和（5）。特別是對於（5）。

<!DOCTYPE html> 
<!-- 1: index.html - full reload --> 
<html ng-app> 
<head> 
    <meta charset="utf-8"> 
    <title>Test Reload</title> 

    <link rel="stylesheet" href="app.css"/> <!-- 2: CSS: no full reload --> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
    <script src="app.js"></script> <!-- 3: Javascript - full reload --> 
</head> 

<body> 
    <h2>Live Reload</h2> 
    <p class="big">Testing CSS</p> 
    <input type="text"> 
    <hr/> 

    <div ng-include="'include.html'"> 
     <!-- 4: AngularJS Partial - full reload --> 
    </div> 

    <div ng-controller="ContactController"> 
    <ul> 
     <li ng-repeat="contact in contacts"> {{ contact }} </li> 
    </ul> 

    <!-- 5: Unrelated - full reload --> 
</body> 
</html>

我的問題是：

是這樣的行爲預期？即只有編輯樣式纔會導致樣式更新，而無需整頁重新加載。所有其他編輯將導致完全重新加載。

我在這裏做錯了什麼嗎？我如何正確使用livereload？

來源

2014-05-03 Kelvin Yong