安装nodejs 安装gulp
新建一个工程文件夹 运行命令
npm init
这个过程中 nodejs会询问你,诸如工程name、版本号之类的信息,按照情况填写就好了 结果如下图:
init结束后生成了package.json文件
这个文件类似maven工程的pom.xml,用于定义工程基础信息,和库依赖。
运行
npm install gulp --save-dev
npm install koa --save-dev
npm install koa-mount --save-dev
npm install koa-static --save-dev
npm install path --save-dev
这里工程依赖了 koa框架
koa-mount将前端工程源码目录进行挂载, koa-static维护静态资源
gulpfile.js gulp构建文件
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'); //本地安装gulp所用到的地方
var koa = require('koa');//引用koa框架
var MockServer = require('./server/mockserver');//koa框架服务器模拟文件
var app = koa();//初始化koa
//前端模拟服务器设置
var proxyServerConfig = {
host: 'http://localhost:82',
serverport: 8080
};
//定义一个testLess任务(自定义任务名称)
gulp.task('testBuild', function () {
gulp.src('src/**/*.css') //该任务针对的文件
.pipe(gulp.dest('build')); //将会在src/css下生成index.css
});
//koa hello world 测试类
gulp.task('testKoa', function () {
app.use(function *(){
this.body = 'Hello World';
});
app.listen(3000);
});
//启动koa框架模拟服务器
gulp.task('mock-server', function() {
proxyServerConfig.app = app;
var mockServer = new MockServer(proxyServerConfig);
mockServer.start(proxyServerConfig);
});
gulp.task('default',['mock-server']); //定义默认任务
//gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[, options]) 执行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径
其中mockServer 为koa框架管理静态资源的脚本,存储在相对路径./server/mockserver.js
/**
* Created by zhukai on 2016/7/26.
*/
var serve = require('koa-static');//koa框架维护静态资源
var mount = require('koa-mount');//将koa应用作为中间件挂载(实现url不同的context拦截)
var koa = require('koa');//koa框架引入
var path = require('path');//用来拼接路径
var Router = require('koa-router');
module.exports = function(options){
var app = options.app;
var host = options.host;
var context = options.context;
var port = options.serverport;
//var application=koa();
return {
start: function() {
var router = new Router({
prefix: context
});
//application.use(serve(path.join(__dirname, '../src')));//(../src是因为该js文件处于次级目录要回到根目录定位src目录)
console.log(path.join(__dirname, '../src'));
//app.use(mount(context,application));//挂载koa application在指定的url上
app.use(serve(path.join(__dirname, '../src')));
/* app.use(router.routes())
.use(router.allowedMethods());*/
app.listen(port);
console.log('web服务'+port+'已启动');
}
}
}
配置完成后目录结构
其中 src 存放静态资源文件 server 存放mockserver.js 工程模拟启动脚本 gulpfile.js package.json 分别为gulp构建脚本 和nodejs依赖文件