gulp koa nodejs 實現的前段工程分離開發

安裝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依賴文件