v-kitty

kitty

便捷的搭建前端工程

功能概述

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

快速入门

安装

npm install v-kitty --save

gulp引入

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)
_include('./index.js?_ac=babel_jstag',{"title":"猜你喜欢"})

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

demo1

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

demo2

index.html
_include('./index.js?_ac=babel_jstag')

./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.比如执行一些替换操作

如何扩展

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. 支持不区分扩展函数大小写