旨在脫離後端環境的前端開發套件 - IDT Server篇

IDT，一個基於Nodejs的，旨在脫離後端環境的前端開發套件，目的就是能讓前端開發徹底脫離後端的環境，不管後端是什麼模板引擎（主流），都能應付自如。

IDT主要包括兩大部分：Server + Build，這一篇主要介紹Server篇。

爲了輔助前端開發，一個本地的相似於Apache的服務器是少不了的，可是有個問題，若是項目中的html，是php的smarty模板怎麼辦？使用純粹的靜態服務器是不行的，由於對前端開發來講，這個html必須由php的smarty模板引擎來解析，前端人員不懂php怎麼辦，可讓後端人員來協助搭建環境；可是項目是java，而html是velocity模板引擎呢？讓後端人員來搭建java環境吧。。。好繁瑣呀。並且，我想根據先後端的接口來本身mock數據怎麼辦？。。這些都是問題，IDT應運而生。

適用於Django Template、PHP Smarty、Java Velocity、Java Freemarker的Integration Develop Tool [ 集成開發工具 ] 

其實，IDT中的server使用的是grunt-conect組件，而後經過了middleware的概念，來處理各類類型的數據：

例如：html middleware作的事情，就是把與請求的url相對應的html文件，與本身的mock數據的文件，經過對應的模板引擎渲染，呈現給瀏覽器：

ajax middleware作的事情也是同樣的。

目前，IDT支持了Python Django、PHP Smarty、Velocity、Freemarker的模板引擎的渲染，大大提升了前端開發的效率。

如何安裝IDT：傳送門

在安裝完成之後，就能夠開始開發了，在終端輸入：idt -V 有正常輸出，則安裝正常～

在安裝的源文件目錄中，有一個：example-ws 目錄，這裏面就是示例目錄，在這裏能夠切換各類模板引擎，進行測試：

.

├── django

│   ├── base.html

│   └── test.html

├── freemarker

│   ├── list.html

│   ├── test.tpl

│   └── view.html

├── idt-config.js

├── mock

│   └── html

│       ├── commonmock

│       │   └── common.js

│       ├── django

│       │   └── test.html.js

│       ├── freemarker

│       │   └── test.tpl.js

│       ├── smarty

│       │   └── test.tpl.js

│       └── velocity

│           └── test.html.js

├── smarty

│   ├── footer.tpl

│   └── test.tpl

└── velocity

    ├── dep.html

    ├── header.html

    └── test.html

能夠把這個目錄拷出一份來，而且cd進入此目錄，則能夠直接執行：

idt ws start

那麼這個例子就跑起來了，想結束server，只須要Ctrl+C。

在切換引擎的時候，惟一須要修改的地方就是：

    // 模板引擎根目錄【只須要修改最後一個參數便可】
    templates: path.join( webContent, secondary, 'velocity' ),

    // 模板引擎切換: smarty / django / velocity / freemarker [ 默認velocity ]
    /**
     * velocity模板引擎採用：
     * https://www.npmjs.com/package/velocity
     *
     * django模板引擎採用'A wrapper of Django's template engine'方式（橋接原理）
     * 詳見：https://www.npmjs.com/package/django
     * 在啓用以前請確保python環境已經ready，而後安裝django:
     * # pip install -v Django==1.7
     * //or
     * # easy_install "Django==1.7"
     *
     * smarty模板引擎採用：
     * https://www.npmjs.com/package/nsmarty
     *
     * freemarker模板引擎採用：（橋接原理）
     * 在啓用以前，請確保java環境，而且須要安裝：http://fmpp.sourceforge.net/
     * https://www.npmjs.com/package/freemarker.js#readme
     */
    tplEngine: 'velocity',

idt-config.js中的第50行，用來修改模板引擎的view的根目錄，71行則是切換引擎的配置。

還有須要注意的地方就是上面代碼中的註釋部分：

django須要安裝好python環境，而且，經過python安裝好django，詳細地則能夠經過上面給出的連接去查看；

同理，freemarker也須要java環境，而且下載fmpp這個東東，並且要把fmpp中的bin目錄加入環境變量；

django和freemarker的原理相似，node層次的代碼，只是一層wrapper，它會經過命令行形式靜默地去掉用python的接口或者java的接口，從而完成渲染。

 

IDT的功能不止這些，還有反向代理、遠程調試、Less的實時編譯（經過less middleware，less在請求過程當中，直接被編譯成css），批量導出靜態文件、Build構建（調用了Edp進行build）等等功能，接下來會慢慢的介紹它的每個功能。

感興趣的能夠看它的源代碼就會了解～