LiveReload gulp-connect和gulp-webserver

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

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

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

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

gulp-connect 传送门

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

npm install gulp-connect

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 的背景来测试反映速度。

个人感受：速度很快。

gulp-webserver 传送门

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

npm install gulp-webserver

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 的目录都会受到监视。

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