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. node_modules\gulp-connect
├── connect-livereload@0.3.
├── event-stream@3.1. (duplexer@0.1., from@0.1., stream-combiner@0.0., pause-stream@0.0., map-stream@0.1., split@0.2., through@2.3.)
├── tiny-lr@0.0. (debug@0.8., qs@0.5., faye-websocket@0.4., noptify@0.0.)
├── gulp-util@2.2. (lodash._reinterpolate@2.4., minimist@0.2., vinyl@0.2., through2@0.5., chalk@0.5., multipipe@0.1., dateformat@1.0., lodash.template@2.4.)
└── connect@2.17. (parseurl@1.0., response-time@1.0., cookie@0.1., cookie-signature@1.0., fresh@0.2., debug@0.8., connect-timeout@1.1., vhost@1.0., qs@0.6., bytes@1.0., basic-auth-connect@1.0., on-headers@0.0., serve-favicon@2.0., errorhandler@1.0., morgan@1.1., cookie-parser@1.1., pause@0.0., type-is@1.2., method-override@1.0., compression@1.0., body-parser@1.2., express-session@1.2., csurf@1.2., serve-index@1.0., serve-static@1.1., multiparty@.
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']);
open browser that your favorited, locate to http://localhost:8080/
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();
});
Multiple server
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
options.root
Type: Array or String Default: Directory with gulpfile
The root path
options.port
Type: Number Default: 8080
The connect webserver port
options.host
Type: String Default: localhost
options.https
Type: Boolean Default: false
options.livereload
Type: Object or Boolean Default: false
options.livereload.port
Type: Number Default: 35729
options.fallback
Type: String Default: undefined
Fallback file (e.g. index.html)
options.middleware
Type: Function Default: []
gulp.task('connect', function() {
connect.server({
root: "app",
middleware: function(connect, opt) {
return [
// ...
]
}
});
});
Contributors
AveVlad and schickling