参考:Gulp.js-livereload 不用F5了,实时自动刷新页面来开发
参考: 用gulp-livereload实现自动刷新页面(v3.0.2)
前面介绍到 gulp 前端自动构建工具,下面我们就来感受一下 gulp 搭配其其他插件 gulp-livereload 所带来的强大力量吧。
在搭建使用gulp-livereload实时自动刷新页面的过程中,需要注意的几点是:
1、使用 gulp-livereload 需要使用 chrome 浏览器,并且安装 gulp-livereload 插件;
2、在 gulpfile.js 中创建task, 旧版使用var server = livereload();已经失效,需要使用 livereload.listen(); ;
3、使用 gulp-livereload 需要使用到服务器,在服务器下进行访问,开启 gulp-livereload 插件;(当然也可以使用 npm 安装 http-server 来启动服务)
gulpfile.js 如下:
/** * Created by DreamBoy on 2016/8/21. */var gulp = require('gulp'), livereload = require('gulp-livereload');gulp.task('watch', function() { //这里的watch,是自定义的,携程live或者别的也行 livereload.listen();//这里需要注意!旧版使用var server = livereload();已经失效 // app/**/*.* 的意思是 app 文件夹下的 任何文件夹 的 任何文件 gulp.watch('app/**/*.*', function(event) { livereload.changed(event.path); });});
成功搭建后,我们可以在 app 文件夹下修改页面,当页面的文件被保存时,浏览器就会进行实时更新,而不需要我们自己去手动刷新。
扫描二维码关注公众号,回复:
5109332 查看本文章
![](/qrcode.jpg)
再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow