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即可实现实时刷新