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

自从Node.js出现之后，真的是繁荣了整个前端开发圈子，搭建

web

服务器也不再局限于以前的

apache

,

nginx

,

tomcat

等了。

现在的Node.js的模块有很多，能搭建服务器的也有很多，我们这里选择简单粗爆的，搭配是

Gulp

+

Gulp-connect

+

watch

+

livereload

;如果你还想要更全的更多的，可以去研究研究

express

，这里不做探讨。

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

npm installgulpgulp-connect

二：配置gulpfile.js,如下：

引入插件

vargulp = 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
})<br>
})

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

运行Gulp时，默认的Task

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

三：在项目目录下运行

gulp

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

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