Question

我正在使用gulp.js和livereload的Chrome扩展程序测试Livereload。我的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);
    });
});

在dist文件夹中，有5个文件

index.html（主页）
app.css（从index.html链接的css）
app.js（从index.html链接的javascript）
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？

Answer 1

如果仍然需要回答。

来自livereload.com：

CSS编辑和图像更改现场直播。

CoffeeScript，SASS，LESS和其他人只是工作。

和

当您更改CSS文件或图像时，浏览器会立即更新，而无需重新加载页面。

所以是的，如果我们改变.css和图像，只刷新这些文件。在其他情况下，整个页面被重新加载。对于.js来说似乎很自然，因为有些代码应该在页面加载时运行，甚至在它之前运行; JS可以＆＃34;画＆＃34;新的元素和livereload服务器将不知道什么，重绘什么以及更改.js时要保留什么。

Gulp JS具有实时重新加载 - 重新加载的内容

1 个答案: