簡介：
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']);
});
|
|
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、說明：谷歌瀏覽器安裝插件需要翻牆，我已經下載了最新版本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