安装插件
安装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'),//编译less    connect = 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(){})

现在我们重新在终端执行gulp，然后再在浏览器打开localhost:8080。做完这些，我们就可以试着在css文件夹的less文件里做一些改动。它会立即编译并刷新浏览器。这样我们并不需要依赖什么浏览器插件，就可以实现页面的自动刷新啦！

本文代码：
提取密码:7886