gulp-connect

本文是參考npm社區的gulp-connect。這個插件有什么作用，默默看圖。基本上和gulp-webserver作用一樣。

 

一、介紹：

這個gulp-connect啟動服務器（並能時時同步）。

二、贊助

贊助者是JetBrains（好像是webstorm的編輯器開發者公司）。

三、安裝

npm install --save-dev gulp-connect

四、說明

var gulp = require('gulp'),
  connect = require('gulp-connect');
 
gulp.task('connect', function() {
  connect.server();
});
 
gulp.task('default', ['connect']);

　LiveReload

var gulp = require('gulp'),
  connect = require('gulp-connect');
 
gulp.task('connect', function() {
  connect.server({
    root: 'app',
    livereload: true
  });
});
 
gulp.task('html', function () {
  gulp.src('./app/*.html')
    .pipe(connect.reload());
});
 
gulp.task('watch', function () {
  gulp.watch(['./app/*.html'], ['html']);
});
 
gulp.task('default', ['connect', 'watch']);

　啟動和關閉服務器

gulp.task('jenkins-tests', function() {
  connect.server({
    port: 8888
  });
  // run some headless tests with phantomjs 
  // when process exits: 
  connect.serverClose();
});

　啟動多個服務器

var gulp = require('gulp'),
  stylus = require('gulp-stylus'),
  connect = require('gulp-connect');
 
gulp.task('connectDev', function () {
  connect.server({
    name: 'Dev App',
    root: ['app', 'tmp'],
    port: 8000,
    livereload: true
  });
});
 
gulp.task('connectDist', function () {
  connect.server({
    name: 'Dist App',
    root: 'dist',
    port: 8001,
    livereload: true
  });
});
 
gulp.task('html', function () {
  gulp.src('./app/*.html')
    .pipe(connect.reload());
});
 
gulp.task('stylus', function () {
  gulp.src('./app/stylus/*.styl')
    .pipe(stylus())
    .pipe(gulp.dest('./app/css'))
    .pipe(connect.reload());
});
 
gulp.task('watch', function () {
  gulp.watch(['./app/*.html'], ['html']);
  gulp.watch(['./app/stylus/*.styl'], ['stylus']);
});
 
gulp.task('default', ['connectDist', 'connectDev', 'watch']);

　http2的支持情況

如果http2的安裝包已經安裝，你用https聯動到gulp connect插件，然后http2將成為首選。

五、API

api參數比較多，這里說一些常用的參數，其他參數和localhost的屬性很像，不再累贅（點擊獲取詳情）

1、option.root

str array 啟動服務器的目錄

2、option.port 

服務器的端口，默認是3000

3、options.livereload

boolean， 是否開啟時時同步，默認是false，通常是開啟的

 

提供一個簡單的demo代碼地址

 

六、結合open使用

（詳情還是上npm社區），可以在在局域網共享，用法很簡單

var open = require('open');
/*
* open(param1,param2)
* param1 str url
* param2 str browserName
*/
open('http://192.168.0.200:1234','chrome');