前端实时可视化开发工具--实现自动刷新

一.修改样式时自动刷新工具

http://livestyle.io/

使用：在浏览器（如谷歌网上应用店）安装livestyle插件；同时在开发工具中安装livestyle插件；

二.支持html/css/js/img等修改自动刷新的工具

http://livereload.com/

使用：

1.安装浏览器插件livereload

2.安装客户端 npm install -g livereload

3.在项目根目录下启动 livereload

三：gulp中实现自动刷新

1.安装gulp

2.安装gulp-livereload

3.在gulpfile.js内配置监听

var gulp = require('gulp');

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

gulp.task('wacth',function(){

//启动livereload监听

livereload.listen();

//例子：监听html修改

gulp.wacth('./*.html',function(file){

gulp.src(file.path).pipe(livereload());

})

})

四：browsersync-----实现修改时局部刷新页面；同时能够实现各终端交互同步，文件同步等

https://browsersync.io/

使用：

1.安装 npm install -g browser-sync

2.在项目根目录下启动browsersync服务 

在gulp中使用browserSync

var gulp = require('gulp');var browserSync = require('browser-sync').create();// Static servergulp.task('browser-sync', function() {    browserSync.init({        server: {            baseDir: "./"        }    });});// or...gulp.task('browser-sync', function() {    browserSync.init({        proxy: "yourlocal.dev"    });});

总结：