简介：

gulp-livereload拯救F5！当监听文件发生变化时，浏览器自动刷新页面。【事实上也不全是完全刷新，例如修改css的时候，不是整个页面刷新，而是将修改的样式植入浏览器，非常方便。】特别是引用外部资源时，刷新整个页面真是费时费力。

1、安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件

1.1、gulp基本使用还未掌握？请参看： gulp详细入门教程

1.2、本示例目录结构如下：

2、本地安装gulp-livereload(为了演示，安装了gulp-less)

2.1、github：https://github.com/vohof/gulp-livereload

2.2、安装：命令提示符执行 cnpm install gulp-livereload --save-dev

2.3、注意：没有安装cnpm请使用 npm install gulp-livereload --save-dev。 什么是cnpm，如何安装？

2.4、说明：--save-dev 保存配置信息至 package.json 的 devDependencies 节点。为什么要保存至package.json？

3、配置gulpfile.js

3.1、基本使用(当less发生变化的时候，自动更新页面)

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');
 
gulp.task('less', function() {
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'))
        .pipe(livereload());
});
 
//特别注意：若编译less的时候，同时执行其他操作，有可能引起页面刷新，而不是将样式植入页面
//例如下面任务同时生成sourcemap：
//var sourcemaps = require('gulp-sourcemaps');
//gulp.task('less', function () {
//    gulp.src(['src/less/*.less'])
//        .pipe(sourcemaps.init())
//        .pipe(less())
//        .pipe(sourcemaps.write('./'))
//        .pipe(gulp.dest('src/css'))
//        .pipe(livereload());
//});
 
gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('src/less/**/*.less', ['less']);
});
XHTML
 
1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
</body>
</html>

4、谷歌浏览器或火狐安装livereload插件

4.1、说明：谷歌浏览器安装插件需要FQ，我已经下载了最新版本2.1.0到本地，点击下载（谷歌为.crx文件，火狐为.xpi文件）

4.2、安装方法：谷歌浏览器安装crx插件方法、火狐浏览器直接将xpi文件拖进浏览器即可安装

5、执行监听任务

5.1、命令提示符执行：gulp watch

6、打开页面并启动livereload浏览器插件

6.1、以服务器的方式打开页面，例如http://localhost:4444，而不是file:///F:/phpStudy/project/src/index.html，否则无法启动livereload浏览器插件

6.2、点击livereload浏览器插件即可启动，如下图：

6.3、简单几步就可以很嗨的写代码了

来源：http://www.ydcss.com/archives/702

gulp教程之gulp-livereload的更多相关文章

  1. gulp教程之gulp中文API

    1.gulp.src(globs[, options]) 1.1.说明:src方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入 ...

  2. gulp教程之gulp-autoprefixer<转>

    简介: 使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀.使用她我们可以很潇洒地写代码,不必考虑各浏览器兼容前缀.[特别是开发移动端页面时,就能充分体现它的优势.例如兼容性不 ...

  3. gulp教程之gulp-less

    简介: 使用gulp-less插件将less文件编译成css,当有less文件发生改变自动编译less,并保证less语法错误或出现异常时能正常工作并提示错误信息. 1.安装nodejs/全局安装gu ...

  4. gulp教程之gulp-htmlmin

    简介: 使用gulp-htmlmin压缩html,可以压缩页面javascript.css,去除页面空格.注释,删除多余属性等操作. 1.安装nodejs/全局安装gulp/本地安装gulp/创建pa ...

  5. gulp教程之gulp-minify-css

    简介: 使用gulp-minify-css压缩css文件,减小文件大小,并给引用url添加版本号避免缓存.重要:gulp-minify-css已经被废弃,请使用gulp-clean-css,用法一致. ...

  6. gulp教程之gulp-imagemin

    简介: 使用gulp-imagemin压缩图片文件(包括PNG.JPEG.GIF和SVG图片) 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile ...

  7. gulp教程之gulp-rev-append

    简介: 使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 ...

  8. gulp教程之gulp-uglify

    简介: 使用gulp-uglify压缩javascript文件,减小文件大小. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 1. ...

  9. gulp教程之gulp-concat

    简介: 使用gulp-concat合并javascript文件,减少网络请求. 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件 1. ...

随机推荐

  1. 让C#轻松实现读写锁分离

    ReaderWriterLockSlim 类 表示用于管理资源访问的锁定状态,可实现多线程读取或进行独占式写入访问. 使用 ReaderWriterLockSlim 来保护由多个线程读取但每次只采用一 ...

  2. Sql数据库时间的转换格式

    Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AM   Select CONVERT(varchar(100), GETDAT ...

  3. LabVIEW如何调用C#Winform

    界面交互并不是Labview的强项,使用Labview创建UI时候总会受制于VI有限的控件,有限的皮肤和有限的控件事件.而当需要实现UI的多文档的窗口,窗口的浮动停靠,动画等功能时还需要花很大的功夫. ...

  4. ubuntu下安装JDK并搭建activeMQ

    1.安装JDK,网上有人说activeMQ支持持JDK1.7及以上版本,未实际测试,保险起见我这里直接安装JDK1.7. #apt-get install openjdk--jdk 2.设置环境变量 ...

  5. ABAP SPLIT

    注意: 假定'\'为分隔符 * '1'会分成1部分,值为1 * 分隔符之前的即使是空白或没有,也算一部分. 最后一个分隔符之后的,若有值会算一部分.若没有值,则不会算 比如'\1\'会分成2部分 '\ ...

  6. nginx expires

    配置expiresexpires起到控制页面缓存的作用,合理的配置expires可以减少很多服务器的请求要配置expires,可以在http段中或者server段中或者location段中加入   1 ...

  7. Android 大图片预览ViewPager

    项目gitHub地址:  https://github.com/bm-x/PhotoView 个人项目gitHub地址:  https://github.com/anan03/ananwork/tre ...

  8. linux下发现可疑用户时处理办法

    如果发现了linux被可疑用户远程登录了,怎么解决呢? 1.先查看最近系统的登录情况 last -10 表示最近10个用户登录的信息,如果发现有可疑账户,就是密码被破解了 [root@localhos ...

  9. 一看便知spring+quartz定时任务

    这是我经过网上收集然后加上自己的测试写的,以便大家使用 标配:已测 注意需要的包:(在已经配置spring 的情况下) quartz-all-1.6.jar        spring-context ...

  10. nginx基本配置和参数说明

    #运行用户user nobody;#启动进程,通常设置成和cpu的数量相等worker_processes 1; #全局错误日志及PID文件#error_log logs/error.log;#err ...