使用Gulp實現網頁自動刷新：gulp-connect

做用

想一想看，在進行前前端開發的時候，若是js或css或其餘文件有任何改動，網頁就會自動加載，不用本身手動去按Ctrl+R或者什麼F5，是否是很爽。今天給你們推薦的，就是這樣一個插件：gulp-connect，它不只可以自動啓動一個web服務器，還能實現上述的熱加載的功能

安裝

前提是你已經安裝好nodejs，gulp，npm，並對他們的使用有基本的瞭解。且項目下已經初始化好了gulpfile.js和package.js文件了。
若是這些你都還不知道，那就去了解一下吧。
安裝命令：

npm install --save-dev gulp-connect

使用

使用默認的參數建立一個服務器：

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

監控並自動刷新

監控根目錄下的app目錄下全部的html文件狀況，若有變更，則自動刷新，若是須要監控less，sass,css,js等等，請自動依葫蘆畫瓢啦！

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: 
//balabala能夠作好多事情
  connect.serverClose();
});

啓動多個服務器

var gulp = require('gulp'),
  stylus = require('gulp-stylus'),
  connect = require('gulp-connect');
 
gulp.task('connectDev', function () {
  connect.server({
    root: ['app', 'tmp'],
    port: 8000,
    livereload: true
  });
});
 
gulp.task('connectDist', function () {
  connect.server({
    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']);