kissy工程构建工具bee
kissy工程构建工具bee
①npm install yo gulp -g，bee通过yoeman安装，gulp作为压缩打包工具
②npm install generator-bee -g
③yo bee（项目文件夹下运行），将自动生成工程目录，以及package.json配置文件（依赖的node模块）、gulpfile.js（gulp的工作流）
Build存放压缩合并后的css、js文件，src为源码，demo存放html文件
yo bee生成项目文件夹没法正确执行npm install命令，github上下载的bee-demo可以正确执行，原因不明？？？
④npm install根据package.json的devDenpendencies项安装依赖的node模块
⑤gulp默认启动gulp-kmc、gulp-less、gulp-min-css按KMD规范编译js、less文件及压缩css文件等，并且实时监控，同时开启本地的server以便调试（由gulp-kmc提供），默认的访问地址为http://localhost:5555，默认只提供build文件夹下内容的访问，即http://localhost:5555/index.js
注解：
①package.json配置文件，供npm读取配置信息，使用npm install命令即可安装依赖的模块
{
"name": "cms",
"version": "1.0.0",
"description": "this is an kissy bee project",
"main": "index.js",
"devDependencies": {//指定依赖的包
"bufferstreams": "0.0.2",
"gulp": "^3.8.7",
"gulp-copy": "0.0.2",
"gulp-filter": "^1.0.2",
"gulp-kclean": "1.0.3",
"gulp-kmc": "1.0.27",
"gulp-less": "^1.3.5",
"gulp-mini-css": "0.0.3",
"gulp-minify": "0.0.5",
"gulp-minify-css": "^0.3.11",
"gulp-rename": "^1.2.0",
"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
②glupfile.js前端构建工具的配置文件
var gulp = require('gulp'); //以node模块的方式加载模块
var kmc = require('gulp-kmc'); //编译js文件，将CMD规范书写的代码编译成KMD规范
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 root = process.cwd(); //返回进程当前的工作目录
//包配置
var pkg = path.basename(root);
var comboSuffix = '-combo';
kmc.config({
packages:[{
name: pkg,
base: src
}]
});
kmc.server({
port:5555,
fixModule:true, //是否修复模块，默认false，执行效率更高
path: dest,
kissy:true
});
var dirs = fs.readdirSync(src);//同步读取文件目录
var kissyFiles = [];
dirs.forEach(function(i){
var stat = fs.statSync(path.join(src,i)); //同步获取文件信息，先用path拼接路径
//排除非版本号目录
if(stat.isFile()&&new RegExp(/.*\.js/).test(i)){
i = i.replace('.js','');
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()) //运行gulp-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.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']);
参考
Gulp开发教程http://www.w3ctech.com/topic/134
Gulp使用指南http://www.techug.com/gulp