第2章{ 2-14 [选学]读懂bee的gulpfile.js }

[选学]读懂bee的gulpfile.js

本节内容为选学，建议深入掌握gulp使用的同学学习。

一个kissy工程的构建需要包含如下部分：

• kissy包模块合并
• kissy模块转换，比如cmd模块转换成KISSY.add()包裹的模块
• kissy模块编译，比如去掉合并文件中大量的KISSY.add()包裹，用于提高脚本性能
• xtemplate模板编译，将.xtpl文件编译成.js文件，用于提高模板渲染性能
• kissy打出的文件，必须包含源码文件，方便线上debug

gulpfile.js就是实现上述功能的范版，包含了如下gulp插件：

• gulp-kmc ：kissy包模块编译插件，淘杰开发
• gulp-kclean ：包模块优化插件，淘杰开发
• gulp-xtemplate ：xtemplate模板编译插件
• xtemplate：xtemplate模板编译器
• gulp-minify ：js压缩插件，该插件比uglify-js强大，推荐使用，淘杰开发

整个构建的流程（基于kissy1.4.8构建，kissy5.0.0文件后缀处理上会有差异，差别不大）如下：

kmc.convert()

严重建议模块采用cmd写法：

//初始化header模块var header = require('./mods/header');header.init();//初始化article模块var article = require('./mods/article');article.init();

然后使用 kmc.convert()将模块转换成KISSY.add()包裹的kissy模块。

这样的好处是，模块可以快速转换成其他模块加载器的适用的版本，比如更换成kissy5.0.0 的modelx，只要如下配置：

kmc.convert({    modulex: true})

想要更换成define包裹（比如seajs），可以如下配置：

kmc.convert({    define: true})

ignoreFiles 参数可以配置忽略转换的文件：

kmc.convert({    ignoreFiles: ['-min.js']})

忽略-min.js文件的转换

kmc.combo()

指定目标模块文件（可以称之为入口模块文件），将其依赖模块合并到该文件中。留意模块名称是自动生成的，依赖于包配置：

kmc.config({    packages:[{        name: 'bee-demo',        base: './src'    }]});kmc.combo({    files:[{        src: "bee-demo/index.js",        dest: "index-combo.js"    }]})

查找的文件路径会是：./src/index.js，合并后的文件是 index-combo.js。同时，会执行复制依赖模块文件的操作。可以配置 deps:'deps.js' ，会生成模块依赖表文件：

KISSY.config('requires',{    "bee-demo/index": [        "./mods/header",        "./mods/article"    ],    "bee-demo/mods/article": [        "node",        "./content-render"    ],    "bee-demo/mods/content-render": [        "./content",        "kg/xtemplate/3.3.3/runtime"    ],    "bee-demo/mods/header": [        "node"    ]});

kclean()

合并后的js文件会包含各个模块代码，它们都带有KISSY.add()包裹，这会影响到脚本性能，所以可以使用kclean()工具，去掉不必要的KISSY.add()包裹。

输出的结果可以看index-min.js，只有一个KISSY.add()包裹。outputModule 参数用于控制输出的模块名称。

那么问题来了，如果我需要KISSY.use()其中的子模块呢，比如KISSY.use('bee-demo/mods/header');因为输出的文件只包含了 bee-demo/index 模块，就use()不到了。我们可以增加 ignoreModules 参数，忽略去掉指定子模块的KISSY.add()包裹：