需求

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

环境搭建

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

1
2
npm install --save-dev gulp

1
2
npm install --global livereload

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

WebServer实现

  • 安装完成后我们需要在需要在开发目录中加入配置文件 gulpfile.js
  • 代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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编辑下看看，修改自动变化