{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 趁早两清 的问题《Gulp JS with live reload - what gets reloaded》','https://www.manongdao.com/q-754856.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
In case an answer is still needed.
From livereload.com:
And
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.