gulp koa nodejs 实现的前段工程分离开发

最新推荐文章于 2024-08-07 17:44:17 发布

weixin_34090643

最新推荐文章于 2024-08-07 17:44:17 发布

阅读量87

点赞数

文章标签： json 前端 python ViewUI

原文链接：https://my.oschina.net/superise/blog/748439

版权

2019独角兽企业重金招聘Python工程师标准>>>

安装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+'已启动');
        }
    }
}

配置完成后目录结构

输入图片说明