码迷,mamicode.com
首页 > 其他好文 > 详细

gulp - connect

时间:2015-10-10 10:25:01      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:

  Gulp plugin to run a webserver (with LiveReload)

Install

npm can help us to install the plugin.

PS C:\study\gulp> npm install --save-dev gulp-connect
gulp-connect@2.2.0 node_modules\gulp-connect
├── connect-livereload@0.3.2
├── event-stream@3.1.7 (duplexer@0.1.1, from@0.1.3, stream-combiner@0.0.4, pause-stream@0.0.11, map-stream@0.1.0, split@0.2.10, through@2.3.8)
├── tiny-lr@0.0.7 (debug@0.8.1, qs@0.5.6, faye-websocket@0.4.4, noptify@0.0.3)
├── gulp-util@2.2.20 (lodash._reinterpolate@2.4.1, minimist@0.2.0, vinyl@0.2.3, through2@0.5.1, chalk@0.5.1, multipipe@0.1.2, dateformat@1.0.11, lodash.template@2.4.1)
└── connect@2.17.3 (parseurl@1.0.1, response-time@1.0.0, cookie@0.1.2, cookie-signature@1.0.3, fresh@0.2.2, debug@0.8.1, connect-timeout@1.1.0, vhost@1.0.0, qs@0.6.6, bytes@1.0.0, basic-auth-connect@1.0.0, on-headers@0.0.0, serve-favicon@2.0.0, errorhandler@1.0.1, morgan@1.1.1, cookie-parser@1.1.0, pause@0.0.1, type-is@1.2.0, method-override@1.0.2, compression@1.0.2, body-parser@1.2.2, express-session@1.2.1, csurf@1.2.0, serve-index@1.0.3, serve-static@1.1.0, multiparty@2.
2.0)

you can saw the connect-livereload already contained.

 Usage

we get a connect object, it help us to serve static web server. default, the web server root is the location of gulpfile.js.

create a js file, named to gulpfile.js, it is the specification name for gulp.

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

default, it support ditionary browser, so you should saw the dictionary.

技术分享

 

LiveReload

you should use watch feature with livereload, so you will create watch task for it.

in watch task, when file changed, watch task trigger specification task, in below, it is html task.

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‘]);

in html task, we reload  target files.

Start and stop server

connect.server start the web server, connect.serverClose to close a web server.

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({
    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‘]);

API

Type: Array or String Default: Directory with gulpfile

The root path

Type: Number Default: 8080

The connect webserver port

Type: String Default: localhost

Type: Boolean Default: false

Type: Object or Boolean Default: false

Type: Number Default: 35729

Type: String Default: undefined

Fallback file (e.g. index.html)

Type: Function Default: []

gulp.task(‘connect‘, function() {
  connect.server({
    root: "app",
    middleware: function(connect, opt) {
      return [
        // ... 
      ]
    }
  });
});

 

Contributors

AveVlad and schickling

 

gulp - connect

标签:

原文地址:http://www.cnblogs.com/haogj/p/4864364.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!