背景

开发静态页面的时候,修改html结构或者样式,利用热更新可以实时保存刷新,这样就不用手动刷新,节省时间。

gulp

使用gulp实现热更新,主要是借助gulp-livereload插件和(LiveReload)[https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei]chrome扩展。

1
2
3
4
5
6
7
8
9
10
11
12
13
var gulp = require('gulp')
var livereload = require('gulp-livereload')

gulp.task('watch',function(){
gulp.task('watch',function () {
livereload.listen();
gulp.watch('src/*.*',function(file){
livereload.changed(file.path);
});
});
})

gulp.task('default',['watch'])

运行gulp脚本之后,开启
chrome扩展,将正在开发的静态资源放到服务器环境里,访问之。

现在只要文件一保存,浏览器就会马上局部刷新了。