v-kitty/README.md

hello kitty

## kitty
便捷的搭建前端工程

## 功能概述
1. 通俗易懂,超低学习成本,只有一条命令
2. 便捷的支持第三方扩展
3. 适合node服务端和前端构建
4. 内置less解析功能
5. 支持commonjs规范,比webpack生成的代码更轻
6. 支持gulp
7. 支持include自定义变量,工程构建更灵活
8. 支持tpl中的js\css\html整合在同一个目录,便捷的组件开发\管理方式
9. 功能强大的cdn处理方案

## 快速入门
##安装
```shell
npm install v-kitty --save
```
        

## gulp引入
```javascript
var gulp = require('gulp');
var kitty= require('v-kitty/gulp.js');

//普通方式
gulp.task('run',function(){
    gulp.src(['./include/*.html'])
        .pipe(kitty())
})

//监听方式,建议使用gulp-watch,因为gulp.watch不能对删除文件监听
var gulpWatch = require('gulp-watch');
gulpWatch('./include/*html',function(){
    gulp.start('run');
})
```
更多使用可以参考v-kitty/test/gulpfile.js文件夹
   
## 配置
* kitty.config.tag="_include" 引入标签 默认 '_include'
* kitty.config.baseDir="./"  项目根目录,如果引入绝对地址需要设置,默认为node_modules上级目录
* kitty.config.varTag.open="@@" 处理变量打开标签
* kitty.config.varTag.close="@@" 处理变量关闭标签
* kitty.config.cdnUrl="" cdn地址
* kitty.config.resourceDir="" 资源文件地址
* kitty.config.watch=true 自动监听关联文件
    
## 使用
####格式
_include('文件名称?_ac=执行的扩展名',options)<br/>
_include('./index.js?_ac=babel_jstag',{"title":"猜你喜欢"})

* _include 主入口
* _ac 执行的扩展名,以下划线`_`分割,打包将按先后顺序执行
* options 选项,必须是标准的JSON格式

#### demo1
```html
index.html
_include('./header.html',{"title":{"name":"猜你喜欢"}}) //数据必须使用标准的json格式(键值使用双引号)

./header.html
<title>@@title.name@@</title>
```
    
#### demo2
```html
index.html
_include('./index.js?_ac=babel_jstag')
```
```javascript    
./index.js
var tpl = _include('tpl/item.tpl');
var Utils = require('./utils.js');
$('body').append(tpl)
```
更多使用可以参考v-kitty/test文件夹

 
## 内置扩展功能
传递content和actionFile参数
* jstag 内容使用`<script>`标签包裹
* csstag 内容使用`<style>`标签包裹
* less less编译
* encode 内容encodeURIComponent
* babel 如果代码使用commonjs规范,必须使用babel进行转换,注意不会es6 to es5, babel值放入在主页面引用中
* minifyJs 压缩js
* minifyCss 压缩css
* minifyHtml 压缩html
* minify 根据文件类型压缩,内部执行minifyJs,minifyCss,minifyHtml,minify建议放到less\label后一步进行
* cdn cdn处理
* beforeCompile compile执行前的动作,默认执行,方便开发者对原始内容处理,必须返回content.比如执行一些替换操作
* afterCompile compile完成后执行的动作,默认执行,方便开发者对编译后内容进一步处理,必须返回content.比如执行一些替换操作

    
## 如何扩展
```javascript
var kitty= require('v-kitty/gulp.js');

//覆盖内置扩展
kitty.loader.minify = function(content,actionFile){return content+'something';}

//新建扩展
kitty.loader.dosomething = function(content,actionFile){return 'something';}
```
    
    
## changelogs

#### v0.3.0
1. 调整编译处理方式,使用叶子反触发编译方式,加快编译速度
2. 调整文件入口方式,内置文件watch


#### v0.2.5
1. 增加loader.beforeCompile功能
2. 增加loader.afterCompile功能

#### v0.2.0
1. 调整loaders模式
2. 提供cdn loader模块
3. 优化版本控制

#### v0.1.12
1. 支持原生异步引入方式

##### v0.1.9
1. 增加baseDir配置
2. 增加变量关闭\打开标签配置
3. 处理js _include无法使用扩展bug

##### v0.1.7
1. 修复js _include失败问题

##### v0.1.5
1. 扩展模式修改,kitty.loader 为扩展对象
2. 支持不区分扩展函数大小写