Livereload介绍
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介绍的更多相关文章
- 前端构建工具gulpjs的使用介绍及技巧
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...
- 前端可视化开发-livereload
在前端开发中,我们会频繁的修改html.css.js,然后刷新页面,开效果,再调整,再刷新,不知不觉会浪费掉我们很多时间.有没有什么方法,我在编辑器里面改了代码以后,只要保存,浏览器就能实时刷新.经过 ...
- Play1+angularjs+bootstrap ++ (idea + livereload)
我的web开发最强组合:Play1+angularjs+bootstrap ++ (idea + livereload) 时间 2012-12-26 20:57:26 Freewind.me原文 ...
- gulp 使用介绍
gulp 使用介绍 gulp gulp 插件 gulp的配置文件gulpfile.js gulp 语法 gulp 实例 gulp的缺点 gulp gulp是基于Node.js的前端自动化构建工具,主要 ...
- 前端构建工具gulp介绍
2016年3月3日 10:46:08 晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...
- web前端开发教程系列-1 - 前端开发编辑器介绍
目录: 前言 一. Webstorm 1. 优点 2. 缺点 3. 教程 4. 插件 5. 技巧 二. SublimeText 1. 优点 2. 缺点 3. 教程 4. 插件 5. 技巧 前言 由于很 ...
- 前端自动化神器LiveReload配合浏览器和less/sass使用方法
前言:搜了半天,各种推荐,什么十大工具啦.优秀工具集合啦之类的咸淡文章,就是没有一个讲怎么弄的.配合官网的article自己研究了半天总算配置好了.顺便吐槽下官网关于sass/less设置这块说的模糊 ...
- Gulp browserify livereload
Gulp browserify livereload 之前在browserify那个博文中介绍了gulp + browserify 不过那个配置还不能满足日常需要 搬运 https://github. ...
- [转载]前端构建工具gulpjs的使用介绍及技巧
转载地址:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非 ...
随机推荐
- 微信小程序-微信自动退款(Java后台)
微信小程序-微信自动退款 1.首先分享 微信自动退款接口: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_4 微信付款 代码案例 ...
- Educational Codeforces Round 6 F. Xors on Segments 暴力
F. Xors on Segments 题目连接: http://www.codeforces.com/contest/620/problem/F Description You are given ...
- 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 ...
- nginx实现简单负载均衡
配置文件 主文件: /etc/nginx/nginx.config 例当前在22.22.22.4服务器 //同时开另外三个服务器 可以在http{} 里添加 include /etc/nginx/si ...
- iOS -- DES算法
算法步骤: DES算法把64位的明文输入块变为64位的密文输出块,它所使用的密钥也是64位(实际用到了56位,第8.16.24.32.40.48.56.64位是校验位, 使得每个密钥都有奇数个1),其 ...
- Eight_pku_1077(广搜).java
Eight Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 21718 Accepted: 9611 Special ...
- 网页图表控件Highcharts选项配置参数
Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全.这里,我把Highcharts常用的最核心的参 ...
- onethink 密码加密方式详解
/** * 系统非常规MD5加密方法 * @param string $str 要加密的字符串 * @return string */ function think_ucenter_md5($str, ...
- ionic 进入二级目录以后隐藏底部导航栏(tabs)
1.在标签ion-tabs中添加:ng-class=”{‘tabs-item-hide’: $root.hideTabs}”,源码如下: <ion-tabs class="tabs-i ...
- Reading assignments in science
First, get a perspective: Review the assignment in the syllabus and any handouts (1-2 minutes)Maybe ...