前端自动化工具 JT
jt底层是一套虚拟文件系统,具有非常强大的扩展能力
通过processor的方式来扩展底层虚拟文件系统对文件的处理能力
通过jt提供的接口来支持上层扩展的开发
github 地址: https://github.com/wyicwx/jt
npm 地址: https://www.npmjs.org/package/jt-cli
安装
1、必须要有node环境和node包管理npm,最新版本的node自带了npm
由于jt使用了流的模式来构建底层,不推荐推荐安装0.80以下版本的node
使用下面的命令查看node版本
$ node -v
v0.10.25
2、使用npm install安装jt
$ npm install -g jt-cli
请一定加上-g参数,jt的名称为jt-cli请不要打错
3、生成配置文件
cd 到项目根目录下,执行下面命令
$ jt init
该命令会在执行命令的目录下生成一个目录.jt
4、通过命令运行jt
$ jt
执行后可以看到下面的输出界面
Usage: jt <command>
Command:
info show jt config infomation
build build project
compress js/css file minify compress
server start proxy server
Option:
-v,--version
目录结构
为了和开发目录的代码区分开来,jt使用单独文件夹来包括所有配置文件和扩展包
.jt
- index.js // 配置文件入口,配置文件过大可以在内部require其他文件来拆分
- package.json // 包文件,目前用处就是来指引jt引用index.js,保留用,后期会和npm搭配
- node_module/ // node包文件,自己开发的模块也存放在这里
文件配置
一般配置写在index.js内,因为index.js也是js文件,可以通过require函数来引入多个js文件,从而拆分配置文件
jt.setConfig('base', '../');
setConfig函数会在jt.config上定义相应的属性,但不推荐直接在jt.config上定义,setConfig会覆盖jt.config默认的值
下面是默认的jt.config属性
jt.config = {
base: null, // 项目根目录,支持绝对路径和相对路径,相对路径相对于.jt的目录
fs: {
list: {}, // 虚拟文件列表,在这里定义虚拟文件的配置
ignorePath: [] // 忽略目录,同base支持绝对和相对路径
},
project: {}, // project,对虚拟文件的一个归类的概念
server: {
slowSpeedSimulate: {
enable: false,
highWaterMark: 100,
interval: 10,
},
port: 8080,
description: 'default',
list: {},
hosts: {} // 自定义host
},
compressor: { // 压缩器,这里定义了默认的压缩方式,定义多个压缩器,在压缩的时候会全部使用并选择最高的压缩率输出
'js': { // 对应js后缀的文件压缩
'jsmin': 'jt-jsmin', // 压缩器
'uglify': 'jt-uglify'
},
'css': { // 对应css后缀的文件压缩
'minicss': 'jt-cssminify'
}
},
plugins: []
};
- jt.config.fs.list配置
通过jt.setConfig来设置fs.list
var list = {};
jt.setConfig('fs.list', list);
1、单个虚拟文件的定义
var DEV_DIR = "~/dev/"; // 开发目录和虚拟文件目录尽量不要同一个目录,生成虚拟文件的时候会导致文件覆盖
var list = {
"js/": {
"libs": {
'sea.js': [ // 这里定义一个 jt.config.base下 jt/libs/sea.js文件,该文件由下面的数组内的文件合并而成
DEV_DIR + 'libs/sea.js'
]
}
};
jt.setConfig('fs.list', list);
jt.config.fs.list下定义的路径都会被自动格式化成完整路径
jt格式化路径会通过判断,key值是否为数组来判断路径是否格式完毕
上面的配置会格式化成
jt.config.fs.list = {
"[jt.config.base]/jt/libs/sea.js": [
DEV_DIR + 'libs/sea.js'
]
}
[jt.config.base] 是jt.config.base根据本地文件系统格式化成的绝对路径
2、processor定义
var list = {
"js/": {
"libs": {
'jquery.js': [
{
processor: ['jt-seajs'], // processor可以定义多个处理器,按定义先后处理
file: DEV_DIR + 'libs/jquery.js', // file指文件路径,允许传入本地文件和虚拟文件
'jt-seajs': { // 作为参数传递给jt-seajs
name: 'jquery'
}
}
]
}
}
};
jt.setConfig('fs.list', list);
也可以通过传递value的方式传递值
{
processor: ['jt-seajs'],
value: 'alert(321)',
'jt-seajs': {
name: 'jquery'
}
}
在file和value同时存在的情况下,file优先级比value高
3、虚拟文件的引用
var list = {
"js/": {
"pc": {
"page.index.js": [
'./module.share.js', // 引用虚拟文件
'./module.slider.js', // 引用虚拟文件
'./module.dialog.js', // 引用虚拟文件
{
processor: 'jt-seajs',
file: DEV_DIR + 'pc/page/index/index.js',
'jt-seajs': {
depend: ['jquery', 'tmt', 'module.share'],
name: 'page.index'
}
}
],
"module.share.js": [
{
processor: ['jt-cssminify', 'jt-seajs'],
file: DEV_DIR + 'pc/module/share.css',
'jt-seajs': {
type: 'string',
name: 'module.share.css'
}
},
{
processor: ['jt-htmlminify', 'jt-seajs'],
file: [
DEV_DIR + 'pc/module/share.html'
],
'jt-seajs': {
type: 'string',
name: 'module.share.html'
}
},
{
processor: 'jt-seajs',
file: DEV_DIR + 'pc/module/share.js',
'jt-seajs': {
type: 'function',
depend: ['jquery'],
name: 'module.share'
}
}
],
"module.dialog.js": [
// 配置
],
"module.slider.js": [
// 配置
]
}
}
}
可以通过使用相对路径来引用虚拟文件
PS:关于jt.fs.list中路径的说明
绝对路径
/ 相对于本地文件系统的路径
相对路径
../ ./ 相对当前虚拟文件的路径
~/ 相对jt.base路径
windows同学也必须使用/路径分隔符,而不是使用\
- jt.config.server.list的配置
var list = {
'http://([^\\/]+)/(.*).js($)': { // 用括号包括起来的部分使用js的正则语法,注意\要用\\代替
respond: [
'$2.js', // $2指代第二个括号匹配的字符,这里的路径同processor的路径处理
{ // 这里允许合并文件
value: ';if(window.console){window.console("map to local file")}'
}
]
}
};
jt.setConfig('server.list', list);
基础命令
参看
- build
$ jt build
- compress
$ jt compress
- server
$ jt server
启动代理
$ jt server start
可用process插件
插件开发
- 命令行接口开发
to be continued!
流知识
to be continued!
关于
开发JT的初衷只是为了弥补os x下没有fiddler的autoresponder功能的缺陷,原先只是一个简单的代理程序,但随着应用面不断的扩大,需要应付的场景越来越复杂,于是有了这个项目。