带有实时重新加载的Gulp JS-重新加载了什么 [英] Gulp JS with live reload - what gets reloaded
问题描述
我正在使用gulp.js和Chrome扩展程序对Livereload进行Livereload测试.我的gulpfile.js
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);
});
});
在dist文件夹中，有5个文件
In the dist folder, there are 5 files
-
index.html(主页) -
app.css(从index.html链接的CSS) -
app.js(通过index.html链接的javascript) -
include.html(包含在index.html中的AngularJS部分ng) -
unrelated.html(不被index.html或任何其他文件使用).
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).
当我编辑任何文件时，浏览器会完全重新加载index.html，从而导致状态丢失.例如，在文本输入中输入的任何内容都会被删除.唯一的例外是当我编辑css文件时.
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.
虽然我理解并希望在编辑(1)时重新加载整个页面，并且在编辑(2)时仅注入CSS而无需重新加载整个页面，但是我不确定这是否是(3)的预期行为)，(4)和(5).特别是对于(5).
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>
我的问题是:
这种行为是预期的吗?即仅编辑样式会导致样式更新，而不会重新加载整个页面.所有其他编辑将导致完全重新加载.
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.
我在这里做错什么了吗?如何正确使用livereload?
Am I doing anything wrong here? How can I use livereload correctly?
推荐答案
如果仍然需要答案.
来自 livereload.com :
CSS编辑和图像更改实时生效.
CSS edits and image changes apply live.
CoffeeScript，SASS，LESS和其他工具都可以正常工作.
CoffeeScript, SASS, LESS and others just work.
还有
当您更改CSS文件或图像时，浏览器会立即更新，而无需重新加载页面.
when you change a CSS file or an image, the browser is updated instantly without reloading the page.
是的，如果我们更改.css和图像，则仅刷新这些文件.在其他情况下，整个页面将被重新加载. .js似乎很自然，因为某些代码应在页面加载时甚至在页面加载时运行； JS可以绘制"新元素，并且livereload服务器不知道，更改.js时要重画什么和保留什么.
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.
这篇关于带有实时重新加载的Gulp JS-重新加载了什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
