gulp修改服务器端口,2.用gulp建立一个服务器

查看你的web文件包

|- view

|-|- index.html

|-node_modules

安装对应的gulp插件

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

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

安装gulp-connect插件

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

编写gulpfile.js文件

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

首先先把需要用到的方法放到简单的(你喜欢的)名字变量里

var gulp = require('gulp');

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

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

//使用connect启动一个web服务器

gulp.task('woyaofuwuqi', function () { //任务名称不要有空格

connect.server({

liverload: true,port:9000 //端口号

});

});

编写默认任务

//默认任务

gulp.task('default', function() {

// 测试一下

console.log('this is a new test page.');

gulp.start('woyaofuwuqi'); //启动一个web服务器

});

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

完成半自动化

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'); //执行任务列表

});

查看你的成果

在命令行中进入你的项目文件夹，输入gulp，进入

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

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