首页 > 其他 > 详细

Gulp-livereload:实时刷新编码

时间:2015-11-20 15:31:49      阅读:396      评论:0      收藏:0      [点我收藏+]

实现功能

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

  

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


  技术分享 

 

Gulp-livereload:实时刷新编码

原文:http://www.cnblogs.com/kevinCoder/p/4980759.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!