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