Gulp搭建web服务器并自动刷新

需求

• 现在应用angularjs或VUE等框架可以实现前后端完全分离式开发，开发过程中也可以用到轻量级的文本编辑器来实现，需要一个简单的本地开发调试环境，想到了IIS、Gulp等，在非Windows下Gulp是很好的应用，还可以打包和压缩js、css等，每改一次去手动刷新的情况也可以避免，只要改动完保存下就可以实现自动刷新

环境搭建

• 首先要安装nodeJs,这个就不介绍了，接下来我们安装gulp 和 gulp-connect

  npm install --save-dev gulp gulp-connect

  npm install --save-dev gulp

  npm install --global livereload

  这三个命令执行完后，安装就完成了

WebServer实现

• 安装完成后我们需要在需要在开发目录中加入配置文件 gulpfile.js

• 代码如下：

  var gulp = require('gulp');
  var connect = require('gulp-connect');
  
  gulp.task('watch', function() {
    gulp.watch('./*.html', ['html']);
    gulp.watch('./css/**/*.css', ['css']);
    gulp.watch('./img/**/*.{png,jpg,gif}', ['images']);
  });
  
  gulp.task('webserver', function() {
    connect.server({
      livereload: true,
      port: 8066
    });
  });
  
  gulp.task('html', function() {
    gulp.src('./*.html')
      .pipe(connect.reload());
  });
  
  gulp.task('css', function() {
    gulp.src('./css/**/*.css')
      .pipe(connect.reload());
  });
  
  gulp.task('images', function() {
    gulp.src('./img/**/*.{png,jpg,gif}')
      .pipe(connect.reload());
  });
  
  gulp.task('default', ['webserver', 'watch']);

• 到此配置完毕，我们可以运行 gulp 来体验一下，用Atom打开html编辑下看看，修改自动变化