企业级前端应用开发平台：EDP、edp webserver、EDP Build

什么是EDP？

EDP是一个基于Node.JS与NPM的企业级前端应用的开发平台，主要通过命令行的方式使用。EDP提供了前端应用开发时常用的一系列工具：项目管理、包管理、调试、构建、代码生成以及代码检测等。（edp和FIS为百度开源前端构建工具）

EDP允许用户自定义自己的扩展。当默认提供的工具无法完全满足开发的需求时，用户可以开发自己的扩展命令。
下载地址
Package的查找、导入与更新
项目管理
单元测试
对前端代码进行静态检测
使用WebServer进行调试
扩展自己的EDP命令
诊断工具
关于EDP更多详情， https://github.com/ecomfe/edp/wiki/Install

EDP是一个企业级前端应用的开发平台，提供了常用的项目管理工具、包管理工具、调试工具、构建工具、代码生成工具、代码检测工具等一系列开发时的支持，并允许用户自定义自己的扩展。

安装与更新

edp已经发布到npm上，可以通过下面的npm命令安装。

-g

选项是必须选项，使用

-g

全局安装后，可以获得command
line的

edp

命令。在Linux/Mac平台下，全局安装可能需要

sudo

。

$ [sudo] npm install -g edp

如果想要升级当前edp的版本，请运行如下命令。在Linux/Mac平台下，升级可能需要

sudo

。

$ [sudo] npm update -g edp

准备

在使用之前，您需要先配置下个人的名字和邮箱。方法如下：(请替换掉

[]

部分)

$ edp config user.name [your_name]
"user.name" is setted.

$ edp config user.email [your_email@example.com]
"user.email" is setted.

使用

我们推荐通过命令行的方式使用edp。直接命令行下执行edp将显示可以调用的命令，包含内建命令和用户定制的命令。

$ edp
Usage: edp <command> [<args>] [<options>]

Builtin Commands:

addhtml         添加html文件
addjs           添加javascript文件
beautify        格式化JS、CSS和JSON文件
build           构建目录或项目
config          读取和设置edp用户配置
csslint         使用csslint检测当前目录下所有CSS文件
extension       扩展管理相关功能
help            显示帮助信息
htmlhint        使用htmllint检测当前目录下所有HTML文件
import          导入包
jshint          使用jshint检测当前目录下所有Javascript文件
minify          使用minify命令来让js、css、json文件获得最小化的输出
project         项目管理相关功能
search          查询现有的包
update          更新依赖包
webserver(ws)   用于开发时调试的WebServer

User Commands:
riaproject

See "edp help <command>" for more information.

--version

将显示当前EDP的版本号。

$ edp --version
edp version 0.6.0

命令手册

在命令行下，我们可以通过

edp help <command>

查看命令的帮助信息。也可以通过下面的链接查看命令帮助：
addhtml
addjs
beautify
build
config
csslint
extension
help
import
jshint
minify
project
search
update
watch
webserver

EDP 扩展 edpx-zhixin

edpx-zhixin

 是 edp 的一个扩展，提供给百度的FE开发搜索结果页模板的工具

启动edpx-zhixin

通过下面的命令，将根据默认的配置文件

edpx-zhixin-config.js

，启动edpx-zhixin，edpx-zhixin会在当前目录查找配置文件，如果没找到，会一直向上级目录查找，找到为止。在

默认

情况下，edpx-zhixin会使用

8848

作为默认端口，并且将

当前目录

作为 

documentRoot

$ edp zhixin start
10:45:21 [INFO] monitor -> /Users/sekiyika/Documents/work/src
10:45:21 all plugins have been loaded.
edp INFO EDP WebServer start, http://192.168.1.106:8848
edp INFO root = [/Users/sekiyika/Documents/work/src/], listen = [8848]

指定配置文件

通过

--config

参数，可以指定edpx-zhixin的配置文件

$ edp zhixin start --config=src/edpx-zhixin-config.js
10:52:26 [INFO] monitor -> /Users/sekiyika/Documents/work/src
10:52:26 all plugins have been loaded.
edp INFO EDP WebServer start, http://192.168.1.106:8848
edp INFO root = [/Users/sekiyika/Documents/work/src/], listen = [8848]

目录结构

edpx-zhixin

要求开发者遵循目录规范，如下：

edpx-zhixin-config.js
src
    page
        ecl_ec_weigou
            config.js
            _page.tpl
            page.tpl
            page.html
            data.json
            ...

配置edpx-zhixin

运行

edp zhixin start

时，需要

edpx-zhixin-config.js

文件，下面是构成

edpx-zhixin-config.js

的默认配置

/** * @file edpx-zhixin-config.js *//** * edpx-zhixin的配置 */exports.server = {
    documentRoot: './', // documentRoot以配置文件所在的目录来计算绝对路径，默认为process.cwd()
    port: 8848 // edpx-zhixin的启动端口，默认为8848};/** * 用来配置开发环境依赖的结果页机器地址，可以配置线下机器 * 默认hostname是www.baidu.com，port为80 */exports.proxy = {
    hostname: 'www.baidu.com',
    port: 80};/** * 如果网页中有同名模板，默认干掉同名模板 */exports.removeSameTpl = true;/** * wise相关的host *///exports.proxy = {//    hostname: 'm.baidu.com',//    port: 80//};/** * 指定php可执行的路径 * @type {string} */exports.php = 'php'; // 指定渲染模板使用的php路径，如果path中有，写php即可/** * 指定依赖的base文件，默认会使用edpx-zhixin中自带的c_base.tpl和c_right_base.tpl文件 */exports.base = {
    left: 'c_base.tpl',
    right: 'c_right_base.tpl'};/** * wise相关的base文件 */// exports.base = 'wise';

开发模板

从新建模板到release，都提供了相应的命令和工具

edp zhixin init

在行业目录下运行

edp zhixin init ecl_fn_demo

，如下：

$ edp zhixin init ecl_fn_demo
>> Do you really want to init `ecl_fn_demo` project in `/Users/sekiyika/Documents/work/src/finance` ?(y/n)y
>> There is a exist project, cover it ?(y/n)y
edp INFO >> `/Users/sekiyika/Documents/work/src/finance/page/ecl_fn_demo` create success.
...
edp INFO >> `/Users/sekiyika/Documents/work/src/finance/page/ecl_fn_demo/config.js` create success.

这样就构建好了一个模板开发所需的基本文件

edp zhixin initwise

创建wise相关的模板命令:

edp zhixin initwise [--root|-r] [--platform|-p] [--data|-d]

目前支持的wise平台为 iphone,utouch,big，在访问的时候url后缀添加

&tn=iphone、&tn=utouch、&tn=big， 切换到相应的平台

例如：

http://m.baidu.com/s?word=%E7%94%B7%E7%A7%91%E5%8C%BB%E9%99%A2&sa=tb&st=111041&tn=utouch

会调用utouch版本的模板

使用
utpl 支持模板编写

集成utpl的模板功能，在

_page.tpl

中引入后，自动编译成相关的函数使用， utpl语法同

underscore.js

的模板语法类似，请参考underscore 获取更多信息

例如：

_page.tpl 内容：

{%*include file="./ajax-list.utpl"*%}

注：形如：

ajax-list.utpl

会被编译成

ajaxListRender

函数，可以在js中直接调用

ajax-list.utpl 内容：

/*utpl:innerFn=false,trim=false*/
<!--列表项目-->
<ul>
    {%each(tplData.list, function(item, index){%}
        <li><a href="{%=item.link%}">{%-item.title%}</a></li>
    {%});%}
</ul>
<!--记录数-->
{%len = tplData.list.length%}
{%if (len!==0) {%}
    {%=len%}条记录
{%}%}

其中

/*utpl:innerFn=false,strip=false*/

为编译选项：

innerFn=false，表示

each

,

escape

等函数不会在模板中内置，需要外部提供

strip=false，表示不会自动去除空格、注释


config.js

config.js

是每个模板目录下都需要的一个配置文件，主要包含和该模板相关的配置

exports.config = {
    tpl: 'ecl_fn_demo', // 模板名
    querys: [
        'iphone',  // 命中该模板时的query，不指定data会默认使用data.json文件作为数据文件
        {
            query: '游戏',
            data: 'data.json' // 指定渲染所需要使用的数据文件
        }
    ],
    side: 'left', // 模渲染的位置，有left和right的取值
    platform: ['ipad', 'pc'], // 该模板适用于ipad或者pc，根据url中的dsp参数来区分，可以为platform: 'pc'
    //platform: ['iphone', 'utouch', 'big'], //wise相关的platform，根据url中的tn参数来区分，tn=utouch，会切换到简版模板
    ajaxs: [ // 代理请求的数据，常用于代理/ecomui的请求
        {
            url: /a.js/,
            file: 'a_1.js', // file和handler是互斥的关系，handler优先级更高
            handler: function(request) {
                return fs.readFileSync('data.json')
            }
        }
    ],
    //build: 'release', // 缺省相当于 edp zhixin build，加上相当于 edp zhixin release （下文提及）
    watch: { // 监控源文件的变化并编译产出page.tpl文件
        filters: [
            '_page.tpl',
            '*.less'
        ],
        events: [
            'addedFiles',
            'modifiedFiles'
        ]
    }};

edp zhixin start

edpx-zhixin

启动时，会查找

documentRoot

目录下的所有

config.js

文件，然后根据

config.js

文件建立query到模板之间的索引

启动之后，可以通过

http://127.0.0.1:8848

访问

注意：在这里推荐配一个host，搜索结果页大部分静态文件都做了

referrer

过滤，非百度域可能会遇到403 forbidden，导致文件加载失败

edp zhixin build

build

可以让用户手动编译生成page.tpl文件，代码不压缩

edp zhixin release

开发完成模板之后，需要发布压缩后的代码，

release

比

build

多做了一步就是编译压缩

项目配置 + tomcat使用/edp webserver

Q:如何知道端口号是多少呢？ 如何知道端口号后代表的相对路径是什么呢？
A:tomcat 的conf 里有一个server.xml;

<Service name="lxb">
<Connector port="7018" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />
<Connector port="8029" protocol="AJP/1.3" redirectPort="8443" />
<Engine name="lxb" defaultHost="localhost">
<Realm className="org.apache.catalina.realm.UserDatabaseRealm"
resourceName="UserDatabase"/>
<Host name="localhost"  appBase=""
unpackWARs="true" autoDeploy="true"
xmlValidation="false" xmlNamespaceAware="false">
<Context path="" docBase="D:/code/yingxiao/yingxiao-zhichi" reloadable="true"/>
</Host>
</Engine>
</Service>

端口号7018在这里配置，
docBase就是本地浏览器中的 http://localhost:7018/
D:/code/yingxiao/yingxiao-zhichi中有webcontent，web-info文件夹
web-info中有channel.xml来配置 http://localhost:7018/index <——> webContent/web/index.vm的路径
tcom里的主模板里 有一句 

#set($webRoot=$!link.getContextPath())

这个是在tomcat中的conf/servel.xml 的配置。即

<Context path="" docBase="D:/code/yingxiao/yingxiao-zhichi" reloadable="true"/>

前端配置为空，但后端会在另外地方配置。
——————————————————————
如果想再开一个项目，得换一个端口号，并把加粗的地方更改下就ok了。
-------------------------------------
edp webserver用法
在要建立新端口的文件夹下运行cmd，输入命令  edp webserver start
会生成一个端口，如edp INFO root = [D:\bridgecode\oldcluster\front\site], listen = [8848] 为8848端口
要把此窗口一值开着，才可以打开本地环境
-----------------------------------------------------------------------------