V-kitty NPM | npm.io

kitty

便捷的搭建前端工程

功能概述

通俗易懂,超低学习成本,只有一条命令
便捷的支持第三方扩展
适合node服务端和前端构建
内置less解析功能
支持commonjs规范,比webpack生成的代码更轻
支持gulp
支持include自定义变量,工程构建更灵活
支持tpl中的js\css\html整合在同一个目录,便捷的组件开发\管理方式
功能强大的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';}