Grunt-Kmc基於KISSY項目打包
1. Grunt-Kmc 是基於nodejs開發的,所以未安裝nodeJS，先需要安裝nodejs。安裝步驟如下：
1. 下載安裝文件，下載地址：http://www.nodejs.org/download/ 如下：
根據操作系統的多少位 下載那個版本。下載完成后，雙擊：
執行相應的安裝，完成后，在終端命令下，做如下操作：
Node 和 npm的版本號，說明都已經安裝成功了(注：新版本的node安裝文件已經包含了npm，所以現在只需要安裝這個node版本的文件就ok)。
2. Grunt安裝：客戶端安裝命令npm install -g grunt-cli (全局安裝)。如下圖：
如上：安裝已完成！
安裝完成之后，敲入命令來安裝grunt-kmc 如下命令：
npm install grunt-kmc --save-dev 運行后，
如上環境安裝完畢。
demo實例演示：
1. 假設我現在有個項目叫demo1，目錄結構如下：
其中npminstall.bat 和 i.bat 兩個批處理文件不看
注意：我的本地目錄結構如下：
在PHP根目錄下的KISSYDemo下的gruntKmc下。你們的可以直接放在根目錄下都沒有問題，這個自己定義的。
2. package.json文件配置：
- 如果我項目根目錄沒有package.json的話，我們可以進入項目文件demo1 在終端命令下 運行 npm init 可以創建一個。
比如我的生成如下：
上面的package.json名詞解釋如下：
package中比較重要的屬性解釋：
name：模塊名
description：模塊描述
version：當前模塊的版本號
author：模塊作者信息
contributors：貢獻者人員信息
dependencies：依賴的模塊，NPM就是通過這個屬性來解決模塊之間的依賴問題的
devDependencies：同上，不過這里的依賴的模塊要多些
keywords：模塊關鍵字，方便你使用npm search查找到它
repository：模塊文件保存地址，那些貢獻者們就能下載到它的源碼了
main：其中”main”: “index”,表示Node.js在調用某個模塊的時候，將尋找main指向的路徑作為模塊的接口，在這里Node將尋找同目錄下的index文件，並嘗試從它那加載模塊；如果沒有main，Node還是會嘗試尋找index.js或者index.node作為包的接口。
bin：模塊的可執行文件路徑
scripts：這個不清楚作什么用？
dist：模塊的指紋，可用來驗證模塊的完全性。
接着我在根目錄下(demo1)下 運行npm install命令 如下：
可以把所有的依賴項提取出來，生成node_modules文件：如下：
3. Gruntfile.js文件。
在根目錄demo1下,如果沒有此文件，可以手動新建一個。此文件是對某目錄下的文件打包合並成一個js文件。如代碼配置如下：
module.exports = function (grunt) { var task = grunt.task; // 如果 Gruntfile.js 編碼為 gbk，打開此注釋 // grunt.file.defaultEncoding = 'gbk'; grunt.initConfig({ // 對build目錄進行清理 clean: { build: { src: 'build/*' } }, pkg : grunt.file.readJSON('package.json'), //將src目錄中的KISSY文件做編譯打包，僅解析合並，源文件不需要指定名稱 kmc: { options: { // depFilePath: 'build/map.js', comboOnly: false, fixModuleName:true, comboMap: false, packages: [ { name: '<%= pkg.name %>', // 從package.json里面讀取name path: './', charset:'utf-8', ignorePackageNameInUri:true } ] }, main: { files: [ { expand: true, cwd: 'src/', // a.js需要打包or生成依賴關系的文件 src: [ 'a.js'], // 模塊最后輸出的路徑（fixModuleName === true的時候必須配置這個選項，否則源文件的內容會被修改） dest: 'build/' } ] } }, uglify: { build: { src : 'build/a.js', dest : 'build/a-min.js' } } }); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-kmc'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', function(type) { task.run(['clean:build','kmc','uglify:build']); }); };
將項目下src下的入口文件a.js 合並壓縮到build/a.js, build/a-min.js下。
我們可以來運行下：
進入項目demo1先執行： npm install
接着執行： grunt 命令即可。
最后目錄生成這樣的：如下：
5. 頁面如何初始化調用？
頁面只需要引入KISSY源文件和js壓縮后的文件如：
<script src="http://g.tbcdn.cn/kissy/k/1.4.0/seed.js?t=20140811" charset="utf-8"></script>
<script src="http://localhost/KISSYDemo/gruntKmc/demo1/build/a-min.js"></script>
接着use下模塊即可 如下：
KISSY.use('demo1/src/a',function(){
console.log("111");
});
上面只是 是對同一個包下kissy模塊調用，但是如果是在不同的包下，比如demo1包下想調用demo2包下的組件或者模塊要如何調用呢？比如demo2包也有一個目錄如下：
思路： 根據Grunt-Kmc 打包的第二種方式 先把demo2包下的src所有的文件打包復制到build下，那么build就有和src下一樣的目錄和文件，且build下模塊名提取出來了的。
如下圖：
build下的demo2.js 自動生成模塊名。
下面是demo2下的Gruntfile.js配置如下：
module.exports = function (grunt) { var task = grunt.task; // 如果 Gruntfile.js 編碼為 gbk，打開此注釋 // grunt.file.defaultEncoding = 'gbk'; grunt.initConfig({ // 對build目錄進行清理 clean: { build: { src: 'build/*' } }, pkg: grunt.file.readJSON('package.json'), /** * 將src目錄中的KISSY文件做編譯打包，僅解析合並，源文件不需要指定名稱 * KISSY.add(<名稱留空>,function(S){}); * * @link https://github.com/daxingplay/grunt-kmc * @link http://docs.kissyui.com/1.4/docs/html/guideline/kmc.html */ kmc: { options: { // depFilePath: 'build/map.js', comboOnly: true, fixModuleName:true, comboMap: false, packages: [ { name: '<%= pkg.name %>', path: './', charset:'utf-8', ignorePackageNameInUri:true } ] }, main: { files: [ { expand: true, cwd: 'build/', // 僅合並這兩個文件 src: [ '**/*.js','!map.js'], dest: 'build/' } ] } }, copy: { main: { files: [ { expand:true, cwd:'src/', src: ['**/*.js'], dest: 'build/'} ] } }, }); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-kmc'); grunt.loadNpmTasks('grunt-contrib-copy'); return grunt.registerTask('default', '默認流程', function(type) { task.run(['clean:build','copy', 'kmc']); }); };
同樣運行命令的方式和上面一樣。(進入項目demo2目錄中運行npm install 及 grunt)
最終生成如下：
現在我們來看看demo1包下的文件如何來調用demo2包下的模塊。比如demo1下的src下c.js文件如下代碼：
// c.js KISSY.add(function (S) { S.log('c'); return {}; },{requires:['demo2/build/demo2']});
依賴demo2包下的build/demo2.js模塊，我們只需要在配置文件改下即可依賴。還是回到我們初始化代碼上來index.html：如下：
<script src="http://g.tbcdn.cn/kissy/k/1.4.0/seed.js?t=20140811" charset="utf-8"></script>
<script src="http://localhost/KISSYDemo/gruntKmc/demo1/build/a-min.js"></script>
</head>
<body>
<script>
//KISSY配置針對不同的包名配置
KISSY.config({
// 開啟自動 combo 模式
combine:true,
// kissy 庫內置模塊的時間戳
tag:'2014',
packages:{
demo1:{
// demo1 包的基准路徑
base:'http://localhost/KISSYDemo/gruntKmc/',
// demo1 包的時間戳
tag:'20140818',
// 開啟 x 包 debug 模式
debug:true
},
demo2:{
// demo2 包的基准路徑
base:'http://localhost/KISSYDemo/gruntKmc/',
// demo2s 包不開啟自動 combo
combine:false
// 不配置 tag，則取 kissy 內置模塊的時間戳
}
}
});
KISSY.use('demo1/src/a',function(){
console.log("111");
});
</script>
</body>
就ok了。如下：我本地測試demo1.
依賴demo2包下的demo2.js demo2.js 又依賴於demo2包下a.js，a.js又依賴於b.js，c.js。所以就可以看到如上所示的請求。
要想多了解gruntKmc打包的話 可以請看 "紫英童鞋" 的原文，如下：
https://github.com/daxingplay/grunt-kmc