2.用gulp建立一个服务器

查看你的web文件包

---

|- view
|-|- index.html
|-node_modules^[1]
|- gulpfile.js

---

安装对应的gulp插件

这个时候请确认你已经把gulp安装完成了。

1. 进入控制台，进入对应的项目地址

2. 安装gulp-connect插件

npm install gulp-connect  //这个插件是gulp模拟静态服务器的插件

编写gulpfile.js文件

重点来了，想让你的工作更轻松更自动，就要好好写gulpfile.js了

1. 首先先把需要用到的方法放到简单的（你喜欢的）名字变量里

var gulp = require('gulp');
var connect = require('gulp-connect');  //静态服务器

2. 我们来启动一个静态服务器

//使用connect启动一个web服务器
gulp.task('woyaofuwuqi', function () {  //任务名称不要有空格
    connect.server({
      liverload: true,port:9000  //端口号
    });
});

3. 编写默认任务

//默认任务
gulp.task('default', function() {
    // 测试一下
    console.log('this is a new test page.');
    gulp.start('woyaofuwuqi');  //启动一个web服务器
});

gulp每次启动的时候（在控制台写gulp）都会运行默认任务

4. 完成半自动化
   4.1 制作一个清除缓存的方法

gulp.task('qinghuancun', function () {
    //清除缓存，或者说，重新加载所有html文件
    gulp.src('*.html')
      .pipe(connect.reload());
});

4.2 监听html文件

gulp.task('watchHtml',function () {
    //监听所有html文件，如果有变化，则执行清除缓存方法
    gulp.watch(['*/*.html'],['qinghuancun']);
});

4.3 把监听任务追加到启动服务器任务中

//第一种方法：将监听任务写进'woyaofuwuqi'任务中
//不推荐
gulp.task('woyaofuwuqi', function () {
    //任务名称不要有空格
    connect.server({
        liverload: true,port:9000 //端口号
    });
    gulp.watch(['*/*.html'],['qinghuancun']);
});
/***********************************************************/
//第二种方法：新建一个任务列表，把监听任务与服务器任务都放在列表中
//推荐
gulp.task('taskList', ['woyaofuwuqi','watchHtml']);
//修改默认任务
gulp.task('default', function() {
    // 测试一下
    console.log('this is a new test page.');
    //gulp.start('woyaofuwuqi');
    gulp.start('taskList');  //执行任务列表
});

5. 查看你的成果
   在命令行中进入你的项目文件夹，输入gulp，进入http://localhost:9000^[2]查看你的index.html页面内容，即时修改index.html文件内容，页面将会自动刷新。

---

1. 如果你正确走完了前一篇文章，你的web包里应该会出现这个文件夹。 ↩

2. 当然，端口号是你自己设置的咯。 ↩