Jt

辅助开发及半自动化工具集

Download as .zip Download as .tar.gz View on GitHub

前端自动化工具 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.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同学也必须使用/路径分隔符,而不是使用\

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);

基础命令

参看

$ jt build
$ jt compress
$ jt server 

启动代理

$ jt server start

可用process插件

jt-include

jt-htmlminify

jt-seajs

jt-splithtml

jt-uglify

jt-less

插件开发

cmd-interface

to be continued!

流知识

to be continued!

关于

开发JT的初衷只是为了弥补os x下没有fiddler的autoresponder功能的缺陷,原先只是一个简单的代理程序,但随着应用面不断的扩大,需要应付的场景越来越复杂,于是有了这个项目。