gulp教程之gulp-livereload

简介：

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发生变化的时候，自动更新页面)

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

<!doctype html>

<head>

<title>Document</title>

</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

巴特西