标签:
Gulp plugin to run a webserver (with LiveReload)
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.
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.
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.
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‘]);
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 [ // ... ] } }); });
AveVlad and schickling
标签:
原文地址:http://www.cnblogs.com/haogj/p/4864364.html