使用gulp-livereload插件实现保存自动刷新页面

日期:2015-12-10 01:04:16

当我们在做页面或是调试页面的时候可能会遇到这样的情况,写好一个样式后返回到浏览器刷新页面查看效果,然后继续返回编辑器编辑代码,这样如此重复的劳动可想而知这中间浪费掉的时间有多少。而有了livereload这个插件后能节省刷新页面的时间和精力。

准备

想要实现保存自动刷新页面的效果需要我们在本地准备如下几个东西:


  1. apache环境,这个相信很多同学都能搞定,在这里推荐一款自己用的Visual AMP 很简单的设置,把本地项目添加到环境中去,通过http://127.0.0.1/这样的路径访问。

    livereload.gif


2.谷歌浏览器插件LiveReload 被墙的同学可以自行翻墙下载,或是找修改host文件来达到访问谷歌的目的。


3.就是要配合gulp-livereload插件用,不用gulp的同学可能就与本教程无缘啦,gulp具体使用方法站内也有,当然网上还有更多好的gulp教程。我本地有一个普通的Sass项目,接着要在这项目上运行gulp,第一步就是创建package.json文件。

init.gif


接着安装最基本的gulp插件和依赖环境

install.gif


大概过了一首歌的时间,插件装好了。看看package.json文件的变化,刚才安装的三个依赖就添加到devDependencies里面了。 

QQ截图20151210004702.png


接着创建gulpfile.js文件在根目录,并配置好相应的任务。

var gulp = require('gulp'), //引入依赖
    compass = require('gulp-compass'),
    livereload = require('gulp-livereload');

//livereload的配置,不配置这个选项就不会自动监听
livereload({
    start: true
})


//compass配置
gulp.task('compass', function() {
    gulp.src('sass/**/*.scss')
        .pipe(compass({
            config_file: 'config.rb',
            css: 'stylesheets',
            sass: 'sass'
        }))
        .pipe(gulp.dest('stylesheets'))
        .pipe(livereload());
});


// 监听
gulp.task('watch', function() {
    gulp.watch(['sass/**/*.scss', 'config.rb'], ['compass']);
    livereload.listen();

});

//执行任务
gulp.task('default', ['compass', 'watch']);


接着启动gulp,开始执行gulpfile.js里配置好的任务。

gulp.gif


然后打开项目地址,启动浏览器插件LiveReload,并修改scss文件把body的背景修改为橙色来测试它的效果。

test.gif


小结

至此使用gulp-livereload插件配合浏览器插件livereload实现自动刷新的任务就这样配置完成了,原理是gulp-livereload插件在本地启一个WebSocket Server,浏览器插件向本地文件注入一段JS代码端口指向35729,然后当发现本地文件有变化的时候,就发送信息给浏览器,让浏览器刷新。下面是在页面中获得的JS路径。

<script src="http://127.0.0.1:35729/livereload.js?ext=Chrome&amp;extver=2.1.0"></script>

当然这也不是没有缺点的,真正的工作场景还是比较复杂的,还有就是不支持多个项目同时运行,基本上就是自己写demo的时候用用,当然在双屏幕的情况下玩起这个还是蛮爽的,不用鼠标拖来拖去的,这基本就是我能想到的它的优点了。鉴于此方案还有有局限性,后续的更优的解决方案还在探索中。