kissy使用小结（1）工程构建工具bee

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