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

时间:2014-05-03 18:37:13

标签: gulp livereload

我正在使用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个文件

  1. index.html(主页)
  2. app.css(从index.html链接的css)
  3. app.js(从index.html链接的javascript)
  4. include.html(angularjs partial ng-included in index.html)
  5. unrelated.html(未被index.html或任何其他文件使用)。
  6. 当我编辑任何文件时,浏览器会完全重新加载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?

1 个答案:

答案 0 :(得分:1)

如果仍然需要回答。

来自livereload.com

  

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

     

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

  

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

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