Gulp JS with live reload - what gets reloaded

问题

I am testing Livereload with gulp.js and the Chrome extension for livereload. My gulpfile.js

// 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);
    });
});

In the dist folder, there are 5 files

index.html (main page)
app.css (css linked from index.html)
app.js (javascript linked from index.html)
include.html (angularjs partial ng-included in index.html)
unrelated.html (not used by index.html or any other files).

When I edit any of the files, the browser does a full reload of index.html, causing a lost of state. For example, whatever entered in the text input is erased. The only exception is when I edit the css file.

While I understand and expect a full page reload when I edit (1) and only the CSS to be injected without a full page reload when I edit (2), I am not sure if this is the expected behaviour for (3), (4), and (5). Particularly for (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>

My questions are:

Are such behaviours expected? i.e. only editing of styles causes an update of styles without a full page reload. All other editing will cause a full reload.

Am I doing anything wrong here? How can I use livereload correctly?

回答1:

In case an answer is still needed.

From livereload.com:

CSS edits and image changes apply live.

CoffeeScript, SASS, LESS and others just work.

And

when you change a CSS file or an image, the browser is updated instantly without reloading the page.

So yes, if we change .css and images, only these files are refreshed. In other cases the whole page gets reloaded. It seems quite natural for .js since some of the code should run on on page load or even before it; JS can "draw" new elements, and the livereload server would have no clue, what to redraw and what to keep when a .js is changed.

来源：https://stackoverflow.com/questions/23448422/gulp-js-with-live-reload-what-gets-reloaded

标签

gulp

livereload