LiveReload 在前端工作中可免去刷新的“苦劳”,用过之后深觉方便。

Gulp 中相关的插件有 gulp-connect(以下称 connect), gulp-webserver(以下称 webserver), gulp-livereload 等。

gulp-livereload 需要配合 Chrome 插件来完成,对这点有些纠结,于是我略过了它。

connect 和 webserver 都提供了 livereload 的功能,用哪个呢?都尝试下吧。

gulp-connect

gulp-connect 传送门

官方简介为:用来跑 Webserver 的,附带 LiveReload 的 Gulp 插件

安装

npm install gulp-connect

配置

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
28
29
30
31
var gulp = require('gulp'),
compass = require('gulp-compass'),
notify = require('gulp-notify'),
connect = require('gulp-connect');
gulp.task('connect', function() {
connect.server({
root: 'app',
livereload: true,
});
});

gulp.task('compass', function() {
gulp
.src(__SRC + '/*.scss')
.pipe(
compass({
config_file: './config.rb',
css: __DIST,
sass: 'sass',
})
)
.pipe(gulp.dest(__DIST))
.pipe(notify({message: 'Compass complete'})) //完成后提示
.pipe(connect.reload()); //注意这里指定了Reload的作用域
});

gulp.task('watch', function() {
gulp.watch(__SRC + '/*.scss', ['compass']);
});

gulp.task('default', ['connect', 'watch']);

使用

测试时仅更改 html 中 body 的背景来测试反映速度。
connect用例

个人感受:速度很快。

gulp-webserver

gulp-webserver 传送门

官方简介为:用来跑本地 Webserver 的,附带 LiveReload 的 Gulp 插件(注意:这是 gulp-connect 的一个重写版本)

安装

npm install gulp-webserver

配置

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
28
29
30
31
32
33
34
var gulp = require('gulp'),
compass = require('gulp-compass'),
notify = require('gulp-notify'),
webserver = require('gulp-webserver');
gulp.task('compass', function() {
gulp
.src(__SRC + '/*.scss')
.pipe(
compass({
config_file: './config.rb',
css: __DIST,
sass: 'sass',
})
)
.pipe(gulp.dest(__DIST))
.pipe(notify({message: 'Compass complete'})); //完成后提示
});

gulp.task('webserver', function() {
gulp
.src(__DIST) //指定监视的范围
.pipe(
webserver({
livereload: true,
directoryListing: true,
})
);
});

gulp.task('watch', function() {
gulp.watch(__SRC + '/*.scss', ['compass']);
});

gulp.task('default', ['webserver', 'watch']);

使用

除 gulp 的配置文件外,与 connect 时使用的 html,scss 等文件是相同的。测试时仅更改 html 中 body 的背景来测试反映速度。

webserver用例

可以发现,gulp-webserver 慢了一拍的样子。

最后的一点思考及疑问

我想 gulp-webserver 在 livereload 上比 gulp-connect 会不会是因为要监视的域不同?(但是在我的比较下它们均为 2,3 个代码量不过 20 行的文件啊)

gulp-connect 直接指定产生 reload 的地方,gulp-webserver 是指定 server 的目录,整个 server 的目录都会受到监视。

如有错误,还请不吝指出,谢谢~