查看你的web文件包
|- view
|-|- index.html
|-node_modules[1]
|- gulpfile.js
安装对应的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，进入http://localhost:9000[2]查看你的index.html页面内容，即时修改index.html文件内容，页面将会自动刷新。
