欢迎使用 knighkit.

knighkit 是自动化，模块开发，并支持自动打包，支持远程调试的前端开发框架。 目的是减少前端开发过程中的重复工作，使你更关注程序本身。

推荐：基于webpack架构全新工作流tua

功能

自动化生成项目结构

一条命令，完成项目的结构

集成常用的 jquery underscore 库等

jquery 主要用于功能的开发，underscore 用于数据的处理等

集成开发阶段使用的模块化开发库 seajs

seajs 用来完成开发阶段的模块加载和调试

新型的模版组成方式，模版即模块。

每个模块都是一个文件夹，每个模块由以下文件构成:

• m.html/hogan/vm/jade 模版文件，支持4种，自动识别编译
• index.js 本模块的js业务逻辑文件
• index.json 本模块的测试数据
• data.js 模版的数据处理逻辑部分

index.js

index.js 是标准的 commonjs 模块，自动生成时，以以下代码为模板：

define(function (require, exports, module) {
    var _$ = require('jsonselect');  // 工具类
    var _g = require('global');  // 工具类
    var utils = require('utils/utils');
    var tpHelper = require('tpHelper'); // 用于模版模块生成的工具类
    module.exports = {
        render: function (data) {
            return ___template___(data);
        }
    }
});

其中，m.html/hogan/vm/jade 编译完毕后的代码，会替换代码中的 template(param) 部分。

模板文件中的静态资源引用

m.html 中，css文件的引用，以及img标签引用的图片，都可以使用相对路径，如：

<link href="./xxx.css">

<div>
    <img src='./a.jpg'/>
</div>

<div>
    <img src='./<%= fileDir %>/b.jpg'/>
</div>

以上代码中第一个img标签中使用的图片是相对于m.html的图片，css 文件时相对于html的css文件。 第二个img标签含有变量，此时的路径就是针对于使用m.html的 html 文件的相对路径。

index.js 和 data.js 中，完整的img标签引用的图片或link引用的css资源，如果是相对路径，是相对于 m.html，否则，也是相对于使用该模板的页面。

xxx.css 中，资源引用可以依照 css 文件使用相对路径，如：

div{
    background: url(./a.jpg);
}

以上代码引用的是相对于xxx.css，和其同级的 a.jpg.

集成 jstm 模版管理工具

可以使用任意支持预编译的模版框架，强有力的模版构建管理能力

• 支持四种模版： jade，ktemplate，mustache（hogan.js），velecity
• 支持模版数据处理模块
• 支持将其他模版作为插件添加

单独模版的测试页面

自动生成单独模版的测试页面，自动打包数据，方便测试每个小模块

可定制 html 模版的生成模块

可方便的自行添加模版中需要的js工具库等

自动重新编译

自动化监测模版文件变化，自动重新编译已修改的模版文件

内建预览服务器

不需要启动自己的 HTTP 服务器，内置的服务器用一条命令就可以启动

内建 weinre 远程调试服务器

一条命令就可以启动 weinre，简单方便的调试移动端

支持 css 的合并压缩

内置打包工具

自动打包，打包后不依赖 seajs

How to start?

$ npm install -g knighkit

安装成功后，可以输入

$ kkit -?
$ kkit -h
$ kkit --help

查看帮助。

构建你第一个 knighkit 项目

初始化项目

kkit -g
kkit --generate

此命令可在执行命令的目录下，生成一个 knighkit 开发项目。

生成模版

kkit -i
kkit --init

根据以上生成项目的 src/template/good.json 生成模版。

生成的模版在src/template中。

添加一个模版

kkit -b list.html

运行上面的命令，会在 src/template 文件夹下生成 list 文件夹，并生成空的 index.js xxx.css m.__html__等。

list的后缀表示使用的模板引擎类型。

如果想使用 jade 模板，命令如下：

kkit -b list.jade

src/template 下，生成 list 文件夹，并生成空的 index.js xxx.css m.__jade__.

编译模版

kkit -b
kkit --build

src/template中的模版会被编译输出到 output文件夹下。

合并压缩

kkit -p
kkit --package

根据配置文件中的配置打包，见配置文件

/**                                                  
 * 打包模块, 可设置多个                                       
 * path 是要打包文件的入口模块路径                                
 * name 是输出文件名称                                      
 * -------- begin -----------*/                      
"packModules": [                                     
    {"path": "src/scripts/business", "name": "business"}
]                                                  

以上配置会以 src/script/business 为主入口，打包程序后，以 business 为名称，输出到 dist 下两个文件：

dist/business.js
dist/business-min.js

启动静态服务器

kkit -s http

该命令可以启动一个http静态服务器，服务器的根目录对应项目的根目录。端口号对应配置文件中的端口号：configs.js中的 http.port，默认是 9527。

模板编译中间件

此静态服务器集成了一个模板编译的中间件，作用是，当访问模板文件时，自动编译，返回给js加载器。如：

require('src/template/list');

以上代码在启动了静态服务器后，可以加载 template 模板文件夹下的 list 模板。

如果不启动静态服务器，会默认查找 src/template/list.js，在 knighkit 中，template/list 会是文件夹，其中包含 index.js m.html xxx.css 等。因此，会返回 404。

以上请求，经中间件处理，会编译相应的模板，并将模板编译后的 js 代码返回给 js 加载器。等同于直接加载使用 kkit -b 以后的 js 文件：

require('output/list/list');

使用第一种方式的好处

• 代码可读性好，让开发者一眼就能看出来引用的模板在哪里。
• 并将模板编译的细节对开发者做了隐藏，让开发者感觉不到模板的编译中间过程的存在。
• 提升开发效率，模板修改后，不再需要使用编译命令编译，直接刷新页面即可查看结果。

启动weinre服务器

kkit -s weinre

启动 weinre 服务器。远程调试在手机上测试的页面。注意，手机和调试的 PC 需要在同一个网段内。

项目打包

kkit -e
kkit --export

参数为项目入口的页面文件（如index.html），将文件名（index）作为项目名称，将主页和主页依赖的静态资源都拷贝到该目录下。

具体的步骤为，在项目根目录先会创建__publish__/{项目名}文件夹，经过分析页面，收集页面依赖的css，根据页面的js入口，合并压缩 js，在 html js css中收集依赖的静态资源（图片，svg，字体文件等）。静态资源拷贝到__publish__/{项目名}/statics下，css 拷贝到 __publish__/{项目名}/styles 文件夹下，压缩后的 js 拷贝到 __publish__/{项目名}/script 下；然后，根据配置文件中的staticResource，将相应的资源拷贝到 __publish__/{项目名}下相应的位置下。除配置在 staticResource 中的文件只是拷贝外，其他文件在拷贝后都会使用文件的 md5 值作为版本号。

"staticResource": [                                     
    {"source": "src/styles/icons", "target": "styles"}
]                                                  

通过以上配置，会将icons文件夹，拷贝到 __publish__/{项目名}/styles 下。

如果不传递任何参数，会默认在 __publish__ 下生成一个 __allpacked 的文件夹，程序会遍历根文件夹下的.html的文件，依次作为入口，打包到 __allpacked 文件夹下。这种方式比较适合含有公共模块较多的页面，在上传静态资源时，可以不必手动处理公共的静态资源。

注意：此命令执行时，会自动执行 kkit -b 编译模板的命令，并且在执行后删除 output 文件夹。

CMS提交

kkit -c
kkit --cms

此处的 cms 提交是比较专有的代码，不适合所有公司的普遍情况。

之所以做一个 cms 提交出来，是想提供一种技术方案，即在没有后台 cms 接口，只有 cms 管理网站的情况下，我们如何做到自动提交文件到 cms。同样适用于 CDN 的提交。

内部实现暂时使用了 phantomjs，需配置环境变量，如果在使用npm安装knighkit过程中，phantomjs的自动下载一直被墙，建议直接去phantomjs官网下载，并配置环境变量。然后再执行一遍 npm install -g knighkit 即可安装通过。

CMS 后续打算直接使用 berserkJS，不再使用phantomjs+capsperJS。

Change logs

2016/2/17 version 0.8.0

支持 include 和 puzzle 扩展标签的嵌套

Authors and Contributors

KnightWu (@wulijian)

Support or Contact

[email protected]