1.npm install yo gulp -g
2.npm install generator-bee -g脚手架工具bee依赖于yeoman
3.项目文件夹下运行yo bee,将自动生成kissy的bee-demo文件目录
或者访问https://github.com/minghe/bee-demo下载bee-demo项目
使用yo bee生成的文件目录没法正确执行npm install命令,github上下载的可以???
4.npm install根据package.json下载需要的node插件
5.运行gulp压缩编辑js、css文件,通过gulp-kmc将启动本地端的server服务,默认的访问地址在http://localhost:5555,只能访问build目录下的js、css文件
注解
1.package.json配置文件载入Node模块
{
"name": "cms",
"version": "1.0.0",
"description": "this is an kissy bee project",
"main": "index.js",
"devDependencies": {
"bufferstreams": "0.0.2",
"gulp": "^3.9.0",
"gulp-copy": "0.0.2",
"gulp-filter": "^3.0.1",
"gulp-kclean": "^1.0.5",
"gulp-kmc": "^1.0.33",
"gulp-less": "^3.0.3",
"gulp-mini-css": "0.0.3",
"gulp-minify": "0.0.5",
"gulp-minify-css": "^0.3.11",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.0.1",
"gulp-util": "^3.0.0",
"gulp-xtemplate": "^1.2.2",
"memory-cache": "0.0.5",
"xtemplate": "3.3.3"
}
}
参考
package.json字段全解http://blog.csdn.net/woxueliuyun/article/details/39294375
npm命令概述http://realwall.cn/blog/?p=120
常用npm命令http://my.oschina.net/robinjiang/blog/168732
2.glupfile.js配置gulp工作流
var gulp = require('gulp');
var kmc = require('gulp-kmc');
var less = require('gulp-less');
var css = require('gulp-mini-css');
var kclean = require('gulp-kclean');
var rename = require("gulp-rename");
var filter = require('gulp-filter');
var minify = require('gulp-minify');
var XTemplate = require('xtemplate');
var gulpXTemplate = require('gulp-xtemplate');
var path = require('path'); //node内置路径模块
var fs = require('fs'); //node内置文件模块
var src = "./src",
dest = "./build";
//包配置
var pkg = "bee-demo";
var comboSuffix = '-combo';
kmc.config({
packages:[{
name: pkg,
base: src
}]
});
kmc.server({ //开启本地服务器
port:5555,
fixModule:true,
path: dest,
kissy:true
});
var dirs = fs.readdirSync(src); //同步读取文件目录
var kissyFiles = [];
dirs.forEach(function(i){
var stat = fs.statSync(path.join(src,i)); //拼接路径,获取文件信息
//排除非版本号目录
if(stat.isFile()&&new RegExp(/.*\.js/).test(i)){
kissyFiles.push(i);
}
});
//使用kmc合并并编译kissy模块文件
function renderKmc(fileName){
var comboFiles = fileName.map(function(name){
return {
src: pkg+"/"+name+".js",
dest: name + comboSuffix+".js"
};
});
var cleanFiles = fileName.map(function(name){
return {
src:name+comboSuffix+'.js',
outputModule:pkg+'/'+name
};
});
return gulp.src([src+'/**/*.js']) //gulp.src待处理文件
//转换cmd模块为kissy模块
.pipe(kmc.convert({ //pipe方法由stream提供,不属于gulp,流水线处理
kissy: true,
ignoreFiles: ['-min.js']
}))
//合并文件
.pipe(kmc.combo({
deps:'deps.js',
files:comboFiles
}))
//优化代码
.pipe(kclean({
files:cleanFiles
}))
.pipe(minify())
.pipe(filter(function(file){
var files = fileName.map(function(name){
return name+comboSuffix+'.js';
});
return files.indexOf(file.relative) == -1;
}))
.pipe(rename(function(file){
fileName.forEach(function(name){
file.basename = file.basename.replace(name+comboSuffix+'-min',name+'-min');
})
}))
.pipe(gulp.dest(dest)); //gulp.dest处理后的文件存放点
}
gulp.task('kmc', function() { //gulp.task约定任务
return renderKmc(kissyFiles);
});
gulp.task('mini-css', function(){
return gulp.src([src+'/**/*.css'])
.pipe(gulp.dest(dest))
.pipe(css({ext:'-min.css'}))
.pipe(gulp.dest(dest));
});
gulp.task('less', function(){
return gulp.src([src+'/**/*.less'])
.pipe(less())
.on('error',function(e){
console.log(e);
})
.pipe(gulp.dest(src));
});
gulp.task('css',['less','mini-css']);
gulp.task('xtpl',function(){
return gulp.src(src+'/**/*.xtpl')
.pipe(gulpXTemplate({
wrap: 'kissy',
XTemplate: XTemplate,
renderJs: 'none'
}))
.on('error',function(e){
console.log(e);
})
.pipe(gulp.dest(src));
});
gulp.task('watch', function() {
gulp.watch(src+'/**/*.xtpl', ['xtpl']);
gulp.watch(src+'/**/*.less', ['css']);
});
gulp.task('default', ['kmc','css','watch']);
/*
kmc.conver编译由cmd规范编写的代码,参数为对象
modulex:true更换成符合kissy5.0.0原则的代码
kissy:true更换成符合KMD规范的代码
define:true更换成用define包裹的代码,符合seajs书写规范
ignoreFile:[‘-min.js’]配置需要忽略的文件
示例:kmc.convert({
kissy: true,
ignoreFiles: ['-min.js']
})
kmc.combo动态合并js文件,参数是对象
files值为数组,src文件的来源,dest文件的最后归属,依赖于kmc.config配置的包名和src文件的来源信息
deps值为字符串,通常为deps.js,以KISSY.config函数设置了文件之间的依赖
示例:kmc.config({
packages:[{
name:’bee-demo’,
base:’./src’
}]
]};
kmc.combo({
files:[{
src:’bee-demo/index.js’,
dest:’index-combo.js’
}],
deps:’deps.js’
})
最终将生成如下的依赖表文件
KISSY.config(modules,{
‘mod-a’:{
requires:[‘mod-b’,’mod-c’]
}
})
或者如下的依赖表文件
KISSY.config(‘requires’{
‘mod-a’:[‘’mod-b,’mod-c’]
})
kclean为合并后的文件提升起见,用单字母简化传递的模块参数和require函数 */
/*
gulp.src通过Node-golb模块获取本地文件,返回可以传递给插件的数据流
*.js匹配所有js文件
js/**/*.js匹配js目录下所有的js文件
!app.js不包含app.js文件
*.+(js|css)匹配js或css文件
gulp.dest处理后文件的存放点,该方法需要放置在pipe流中
.pipe实现流水线操作
gulp.task(‘task-name’,function(){})定义任务,命令行输入gulp task-name启动该任务
default默认执行的人物,命令行输入gulp即启动
gulp.watch(‘js/*.js’,[‘task-name’])监听文件,并执行相应的任务
watcher.on(‘change’,function(){})通过绑定事件的方法输出监听信息 */
参考
Gulp开发教程http://www.w3ctech.com/topic/134
Gulp开发指南http://www.techug.com/gulp
慕课网玩转kissy框架http://www.imooc.com/code/4488
相关推荐
generator-bee是kissy简单工程构建器,跟generator-xcake和generator-clam有所不同,强调简单和快速,没有复杂的目录分级和复杂的命令功能,不是以页面作为划分维度,适用于小工程构建。 generator-bee 遵循最新的...
调试模块文件使用CMD规范,是无法使用源码直接调试的,所以bee 内置了个本地静态服务,运行:gulp会编译文件到build目录,同时会起一个本地server,访问:,就是访问bee-demo/src/index.js文件。包配置路径指向本地...
淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。 KISSY ...
KISSY提供稳定的核心,包括 oo、dom、Event、Anim、Ajax 等;强大且易用的脚本加载器,特有的 loader;丰富的UI组件,包括 Switchable、Overlay、Draggable and Droppable 等。KISSY具备模块化、高扩展性、组件齐全...
KISSY 1.4.8,一个淘宝用的类似jQuery的前端框架
淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。
kissy-1.4.8.zip,淘宝最新前端开发包
使用KISSY实现视差滚动效果
js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码
kissy.js 提供小程序开发中一些常用的工具函数,有完整的接口文档。 下载地址:http://7te9kq.com1.z0.glb.clouddn.com/wxapp/kissydocs.html 本站下载:kissy.js (此图片来源于网络,如有侵权,请联系删除! ) 示例...
KISSY Editor 是开源项目 KISSY ...KISSY 目前基于 YUI 2.x 开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件。目前已有 CSS 基础框架、搜索提示 Suggest 和今天发布的富文本编辑器等组件。
Kissy 15天学会.zip欢迎下载!!!
淘宝帮派编辑器 kissy editor 2.0
Web常用UI库 kissy ,kissy 是淘宝一个开源的 JavaScript 库,包含的组件有:日历、图片放大镜、卡片切换、...
高发展前途的web前端开发利器--kissy,中文文档。拥有该文档后不必再上网到处找,一切尽在其中。
Kissy学习教程.rarKissy学习教程.rarKissy学习教程.rarKissy学习教程.rar
淘宝kissy帮助文档 学习文档 用法等
YUI RTE – 如果爱上你是场梦境,醒来后叫我如何继续使用? NicEditor – 爱唐装的摇摆,还是牛仔的风采?这是位别致的女孩,很难让人爱或不爱。 百度/QQ/163/白社会编辑器 – 各具特色。 淘宝用过一个很古老的编辑...
KISSY框架是目前硕果仅存的几个国产js框架之一,在阿里的网站比如淘宝网、天猫等大量使用。
高发展前途的web前端开发利器--kissy,中文文档。拥有该文档后不必再上网到处找,一切尽在其中。