`

kissy使用小结(1)工程构建工具bee

 
阅读更多

1.npm install yo gulp -g

2.npm install generator-bee -g脚手架工具bee依赖于yeoman

3.项目文件夹下运行yo bee,将自动生成kissybee-demo文件目录

或者访问https://github.com/minghe/bee-demo下载bee-demo项目

使用yo bee生成的文件目录没法正确执行npm install命令,github上下载的可以???

4.npm install根据package.json下载需要的node插件

5.运行gulp压缩编辑jscss文件,通过gulp-kmc将启动本地端的server服务,默认的访问地址在http://localhost:5555,只能访问build目录下的jscss文件

 

注解

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)匹配jscss文件

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-bee是kissy简单工程构建器,跟generator-xcake和generator-clam有所不同,强调简单和快速,没有复杂的目录分级和复杂的命令功能,不是以页面作为划分维度,适用于小工程构建。 generator-bee 遵循最新的...

    bee-demo:generator-bee的demo工程,generator-bee是kissy简单工程构建器,强调简单和快速,没有复杂的工程分级和复杂的命令功能

    调试模块文件使用CMD规范,是无法使用源码直接调试的,所以bee 内置了个本地静态服务,运行:gulp会编译文件到build目录,同时会起一个本地server,访问:,就是访问bee-demo/src/index.js文件。包配置路径指向本地...

    kissy源文件代码

    淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。 KISSY ...

    淘宝KISSY前端开发框架

    KISSY提供稳定的核心,包括 oo、dom、Event、Anim、Ajax 等;强大且易用的脚本加载器,特有的 loader;丰富的UI组件,包括 Switchable、Overlay、Draggable and Droppable 等。KISSY具备模块化、高扩展性、组件齐全...

    KISSY 1.4.8

    KISSY 1.4.8,一个淘宝用的类似jQuery的前端框架

    kissy 框架

    淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。

    kissy-1.4.8.zip

    kissy-1.4.8.zip,淘宝最新前端开发包

    使用KISSY实现视差滚动效果

    使用KISSY实现视差滚动效果

    js KISSY框架阿里云滑动下拉导航菜单效果代码

    js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码

    KISSY 微信小程序版

    kissy.js 提供小程序开发中一些常用的工具函数,有完整的接口文档。 下载地址:http://7te9kq.com1.z0.glb.clouddn.com/wxapp/kissydocs.html 本站下载:kissy.js (此图片来源于网络,如有侵权,请联系删除! ) 示例...

    kissy_editor

    KISSY Editor 是开源项目 KISSY ...KISSY 目前基于 YUI 2.x 开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件。目前已有 CSS 基础框架、搜索提示 Suggest 和今天发布的富文本编辑器等组件。

    Kissy 15天学会.zip

    Kissy 15天学会.zip欢迎下载!!!

    kissy editor 2.0

    淘宝帮派编辑器 kissy editor 2.0

    Web常用UI库 kissy.zip

    Web常用UI库 kissy ,kissy 是淘宝一个开源的 JavaScript 库,包含的组件有:日历、图片放大镜、卡片切换、...

    kissy-1.4.8.rar

    高发展前途的web前端开发利器--kissy,中文文档。拥有该文档后不必再上网到处找,一切尽在其中。

    Kissy学习教程

    Kissy学习教程.rarKissy学习教程.rarKissy学习教程.rarKissy学习教程.rar

    kissy 学习

    淘宝kissy帮助文档 学习文档 用法等

    KISSY Editor 1.0.0

    YUI RTE – 如果爱上你是场梦境,醒来后叫我如何继续使用? NicEditor – 爱唐装的摇摆,还是牛仔的风采?这是位别致的女孩,很难让人爱或不爱。 百度/QQ/163/白社会编辑器 – 各具特色。 淘宝用过一个很古老的编辑...

    kissy学习教程

    KISSY框架是目前硕果仅存的几个国产js框架之一,在阿里的网站比如淘宝网、天猫等大量使用。

    kissy中文文档

    高发展前途的web前端开发利器--kissy,中文文档。拥有该文档后不必再上网到处找,一切尽在其中。

Global site tag (gtag.js) - Google Analytics