使用Gulp搭建本地开发web服务器及自动刷新

自从Node.js出现之后，真的是繁荣了整个前端开发圈子，搭建web服务器也不再局限于以前的apache,nginx,tomcat等了。

现在的Node.js的模块有很多，能搭建服务器的也有很多，我们这里选择简单粗爆的，搭配是Gulp+Gulp-connect+watch+livereload;如果你还想要更全的更多的，可以去研究研究express，这里不做探讨。

一：通过以下代码安装所需的模块。

npm install gulp gulp-connect

二：配置gulpfile.js,如下：

• 引入插件

 var gulp = require('gulp'),connect = require('gulp-connect');

• 创建watch任务去检测html文件,其定义了当html改动之后，去调用一个Gulp的Task

 gulp.task('watch',function(){
         gulp.watch('./src/*.html',['html']);
       }) 

• 使用connect启动一个Web服务器

 gulp.task('connect',function(){
    connect.server({
        root:'./',  
        ip:'192.168.31.110',
        livereload:true
    })

})

gulp.task('html', function(){
  gulp.src('./src/*.html')
      .pipe(connect.reload());
});

• 运行Gulp时，默认的Task

gulp.task('default',['connect','watch'])

三：在项目目录下运行

 gulp

即可看到服务器开启，以及默认的访问地址和端口（如果设置了IP，也可以通过IP地址访问）进行访问。

同时，当你更改了你watch的文件时，浏览器会自动刷新，同步展现效果,这样我们也就不用再每次都手动去刷浏览器了。