码迷,mamicode.com
首页 > 其他好文 > 详细

Livereload介绍

时间:2014-07-27 23:44:50      阅读:374      评论:0      收藏:0      [点我收藏+]

标签:gulp   nodejs   前端开发   livereload   yeoman   

查看原文: http://lufeng.me/livereload

**Livereload**可理解为即时刷新,在前端开发中,开发者在编写或调试html/js/css代码后需要从编辑器切换到浏览器,再刷新浏览器才能看到页面变化,这种十分频繁的操作在一定程度上影响了工作效率,而Liverelod可以帮助我们ad解决了这个问题。


实现livereload有多种方式,可以借助[Livereload](http://livereload.com/)软件加浏览器插件实现,也可以借助nodejs,通过gulp或者grunt这些task runner实现,但其基本原理都是一样的,即通过在本地开启一个websocket服务,检测文件变化,当文件被修改后触发livereload任务,推送消息给浏览器刷新页面。


在众多的实现方法中,相比nodejs代码实现,使用其他软件或浏览器插件显然没有必要,这里介绍gulp的实现方式,个人认为是比较简单快捷的方式。


---


##gulpjs 实现 livereload
首先需要[安装nodejs](http://nodejs.org/), 再安装 gulp, gulp-connect 模块


```
  $ sudo npm install -g gulp //全局安装gulp模块
```


切换到项目根目录下


```
  $ mkdir ~/gulptest && cd ~/gulptest
  $ npm init
  $ npm install --save-dev gulp gulp-connect
  $ touch gulpfile.js
```


在项目根目录下需要有**gulpfile.js**这个文件


```
var gulp = require(‘gulp‘),
  connect = require(‘gulp-connect‘);


gulp.task(‘connect‘, function() {
  connect.server({
    root: ‘app‘,
    livereload: true
  });
});


gulp.task(‘html‘, function () {
  gulp.src(‘./app/*.html‘)
    .pipe(connect.reload());
});


gulp.task(‘watch‘, function () {
  gulp.watch([‘./app/*.html‘], [‘html‘]);
});


gulp.task(‘default‘, [‘connect‘, ‘watch‘]);


```


建立gulpfile.js文件后在根目录下运行命令:


```
  $ gulp
  
```
![image](http://webtest.qiniudn.com/gulpstart.png)


即可看到本地启动了web server和livereload server,现在打开http://localhost:8080 编辑html文件保存后就可以看到浏览器自动刷新。


---


##使用yoeman generator生成已经整合livereload功能的项目脚手架


安装yeoman和相应的generator(generator-gulpx)


```
  $ sudo npm install -g yo generator-gulpx
```


新建项目


```
  $ mkdir ~/yogulpx/ && cd ~/yogulpx
  $ sudo yo gulpx
  $ gulp


```


可以看到借助yeoman generator可以很方便的构建项目,推荐使用


---


推荐观看:
[gulp入门](http://tagtree.tv/gulp) (一个15分钟的介绍视频)

Livereload介绍,布布扣,bubuko.com

Livereload介绍

标签:gulp   nodejs   前端开发   livereload   yeoman   

原文地址:http://blog.csdn.net/u010373419/article/details/38184333

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!