旨在脱离后端环境的前端开发套件 - 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）等等功能，接下来会慢慢的介绍它的每个功能。

感兴趣的能够看它的源代码就会了解～