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

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

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


gulpjs 实现 livereload

首先须要安装nodejs, 再安装 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

就可以看到本地启动了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入门 (一个15分钟的介绍视频)

Livereload介绍的更多相关文章

  1. 前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

  2. 前端可视化开发-livereload

    在前端开发中,我们会频繁的修改html.css.js,然后刷新页面,开效果,再调整,再刷新,不知不觉会浪费掉我们很多时间.有没有什么方法,我在编辑器里面改了代码以后,只要保存,浏览器就能实时刷新.经过 ...

  3. Play1+angularjs+bootstrap ++ (idea + livereload)

    我的web开发最强组合:Play1+angularjs+bootstrap ++ (idea + livereload) 时间 2012-12-26 20:57:26  Freewind.me原文   ...

  4. gulp 使用介绍

    gulp 使用介绍 gulp gulp 插件 gulp的配置文件gulpfile.js gulp 语法 gulp 实例 gulp的缺点 gulp gulp是基于Node.js的前端自动化构建工具,主要 ...

  5. 前端构建工具gulp介绍

    2016年3月3日 10:46:08     晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...

  6. web前端开发教程系列-1 - 前端开发编辑器介绍

    目录: 前言 一. Webstorm 1. 优点 2. 缺点 3. 教程 4. 插件 5. 技巧 二. SublimeText 1. 优点 2. 缺点 3. 教程 4. 插件 5. 技巧 前言 由于很 ...

  7. 前端自动化神器LiveReload配合浏览器和less/sass使用方法

    前言:搜了半天,各种推荐,什么十大工具啦.优秀工具集合啦之类的咸淡文章,就是没有一个讲怎么弄的.配合官网的article自己研究了半天总算配置好了.顺便吐槽下官网关于sass/less设置这块说的模糊 ...

  8. Gulp browserify livereload

    Gulp browserify livereload 之前在browserify那个博文中介绍了gulp + browserify 不过那个配置还不能满足日常需要 搬运 https://github. ...

  9. [转载]前端构建工具gulpjs的使用介绍及技巧

    转载地址:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非 ...

随机推荐

  1. 微信小程序-微信自动退款(Java后台)

    微信小程序-微信自动退款 1.首先分享 微信自动退款接口: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_4 微信付款 代码案例 ...

  2. Educational Codeforces Round 6 F. Xors on Segments 暴力

    F. Xors on Segments 题目连接: http://www.codeforces.com/contest/620/problem/F Description You are given ...

  3. HDU 1507 Uncle Tom's Inherited Land*(二分匹配,输出任意一组解)

    Uncle Tom's Inherited Land* Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...

  4. nginx实现简单负载均衡

    配置文件 主文件: /etc/nginx/nginx.config 例当前在22.22.22.4服务器 //同时开另外三个服务器 可以在http{} 里添加 include /etc/nginx/si ...

  5. iOS -- DES算法

    算法步骤: DES算法把64位的明文输入块变为64位的密文输出块,它所使用的密钥也是64位(实际用到了56位,第8.16.24.32.40.48.56.64位是校验位, 使得每个密钥都有奇数个1),其 ...

  6. Eight_pku_1077(广搜).java

    Eight Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 21718   Accepted: 9611   Special ...

  7. 网页图表控件Highcharts选项配置参数

    Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全.这里,我把Highcharts常用的最核心的参 ...

  8. onethink 密码加密方式详解

    /** * 系统非常规MD5加密方法 * @param string $str 要加密的字符串 * @return string */ function think_ucenter_md5($str, ...

  9. ionic 进入二级目录以后隐藏底部导航栏(tabs)

    1.在标签ion-tabs中添加:ng-class=”{‘tabs-item-hide’: $root.hideTabs}”,源码如下: <ion-tabs class="tabs-i ...

  10. Reading assignments in science

    First, get a perspective: Review the assignment in the syllabus and any handouts (1-2 minutes)Maybe ...