Gulp-livereload:实时刷新编码

实现功能

监听指定目录下的所有文件，实时动态刷新页面

  

安装（Install）

功能的实现是借助 gulp-connect 插件完成的;所以，首先通过下面命令完成插件安装：

  npm install --save-dev gulp-connect

 

安装完成后进入下一步。

  配置使用（Usage）

  配置gulpfile.js 文件

  

var gulp=require('gulp');
var connect = require('gulp-connect');

//server
gulp.task('connect',function(){
	connect.server({
		root:'app',
		port:8000,//修改默认端口：http://localhost:8000/ 
		livereload:true
	});
});

//reload server
gulp.task('reload-app',function(){
	gulp.src('app/**/*.*')
	  .pipe(connect.reload());
});

//监听事件
gulp.task('live',function(){
	gulp.watch('app/**/*.*',['reload-app']);
});

//测试服务器
gulp.task('default',['connect','live']);

　　

 启动gulp

 

 打开http://localhost:8000/，看到目录如下：

找到你的开发目录，修改文件，可发现已经不用使用F5即可实现实时刷新