使用gulp-connect实现web服务器

安装插件
安装gulp-connect插件，安装命令如下

npm install --save-dev gulp-connect

定义web服务，gulpfile.js代码

var gulp = require('gulp'),connect = require('gulp-connect'), //实现web服务器插件

gulp.task('default', function() {
});//使用connect实现web静态服务器和页面自动刷新
//指向地址:gulpfile.js所在的文件目录
gulp.task('webserver',function(){connect.server();
})gulp.task('default',['webserver'],function(){})

在终端执行”gulp”命令，即可启动服务器，在浏览器中输入：localhost:8080或者ip+端口例如：192.168.30.161:8080；
此时指向的地址是gulpfile.js所在的目录,根据文件目录修改地址,例如:

加入livereload 实现页面自动刷新

第一步 : 告诉web服务启动的时候运行livereload
第二步 : 在页面有更新的时候通知livereload刷新页面

实现第一步 : 将livereload设置为true , 将 webserver 任务改写成如下的样子

gulp.task('webserver',function(){connect.server({livereload:true});
})

实现第二步 : 第二步取决于具体实例，例如将less文件自动编译成css样式表，并让其被浏览器识别。

利用watch来监控less文件的变化，监控到变化时watch触发less编译器，输出新的css文件。之后这个css文件有更新了之后就会去通知livereload，让其刷新页面。

需使用less插件插件安装命令如下

npm install --save-dev gulp-less

watch任务执行的时候，gulp.js监听css文件夹里less文件的所有改动，当有改动的时候就会触发less任务。每一次编译之后，结果会自动返回给浏览器。

此时gulpfile.js的文件内容如下

var gulp = require('gulp'),less = require('gulp-less'),//编译lessconnect = require('gulp-connect'), //实现web服务器
option = {//编译后存放文件的目录buildpath :'dist'
}
coding={//开发目录buildpath : 'src'
}gulp.task( 'default', function() {
});
//使用connect实现web静态服务器和页面自动刷新
//指向地址:gulpfile.js所在的文件目录
gulp.task( 'webserver',function(){connect.server({livereload:true});
})/**编译less*/gulp.task('less',function(){return gulp.src(coding.buildpath +'/css/*.less') //less文件路径
        .pipe(less()).pipe(gulp.dest(option.buildpath + '/css/'))//输出文件夹.pipe(connect.reload());//重新载入 刷新时使用
})/*
* watch
* */gulp.task('watch',function(){gulp.watch([coding.buildpath+'/css/**'],['less']);
})
gulp.task('default',['less','webserver','watch'],function(){})