初學seaJs模塊化開發，利用grunt打包，減小http請求

原文地址：初學seaJs模塊化開發，利用grunt打包，減小http請求

未壓縮合並的演示地址：demo2

學習seaJs的模塊化開發，適合對seajs基礎有所瞭解的同窗看，目錄結構

js —

—dist   //壓縮後的目標文件夾

—lib   //各個模塊

             —drag    //拖拽模塊

             —scale   //縮放模塊

             —seajs    //seajs庫

—seajs_drag    //入口的主文件main.js

              —main.js

/*———————————————————————————————————————————–*/

首先是seajs_drag.html

<input type="button" id="inp" value="點擊顯示紅色方框" />
 
<div id="div1">
<div id="div2"></div>
</div>
 
<div id="div3"></div>
 
<script src="js/lib/seajs/sea.js"></script>
<script>
 
seajs.config({
base : "./"
});
 
seajs.use('js/dist/drag.js');    //引入壓縮合並後的單個文件，若是沒有壓縮，這裏則爲請求main.js
 
</script>

　　

main.js中分別引入模塊的功能（拖拽，縮放），這樣後面若是增長了功能只需在主文件main.js中引入便可。

define(function(require, exports, module){
var inp = document.getElementById("inp");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
 
var drag = require('../lib/drag/drag.js');
drag.drag(div3);
// require("../lib/drag/drag.js").drag(div3);
 
// require('../lib/modal/modal.js');
inp.onclick = function () {
div1.style.display = "block";
 
// var scale = require('../lib/scale/scale.js');
// scale.scale(div1, div2);
// 按需異步加載
var scale = require.async('../lib/scale/scale.js', function(e){
e.scale(div1, div2);
});
 
}
})

　　

/*———————————————————————————————————————————–*/

而後是利用grunt打包

package.json爲

{
「name」: 「drag」,
「version」: 「1.0.0」,
「description」: 「this is a grunt example for seajs」,
「main」: 「Gruntfile.js」,
「scripts」: {
「test」: 「echo \」Error: no test specified\」 && exit 1″
},
「author」: 「」,
「license」: 「ISC」,
「devDependencies」: {
「grunt」: 「^0.4.5″,
「grunt-cmd-concat」: 「^0.2.8″,
「grunt-cmd-transport」: 「^0.5.1″,
「grunt-contrib-clean」: 「^0.6.0″,
「grunt-contrib-copy」: 「^0.8.0″,
「grunt-contrib-uglify」: 「^0.9.1″
}
}

　　

能夠下載代碼包後，npm install，通常npm init後就會生成初始的內容，而後npm install 包名 -save-dev 就會添加到package.json中

Gruntfile.js文件內容

module.exports = function(grunt) {
 
grunt.initConfig({
/**
* step 1:
* 將入口文件拷貝到 產出目錄
*/
copy: {
hellosea:{
files:{
"js/dist/drag.js" : ["js/seajs_drag/main.js"]
}
 
}
},
 
/**
* step 2:
* 建立一個臨時目錄
* 將須要合併的js文件轉爲具名函數，並保持獨立地保存在這個臨時目錄
*/
transport: {
drag: {
options: {
// // 是否採用相對地址
relative: true,
// // 生成具名函數的id的格式 默認值爲 {{family}}/{{name}}/{{version}}/{{filename}}
format: './js/dist/{{filename}}'
// // paths: [buildDir],
// // include: 'all'
 
},
 
files: [{
expand: true,
// 相對路徑地址
'cwd':'',
// 須要生成具名函數的文件集合
'src':['./js/dist/drag.js', './js/lib/drag/drag.js', './js/lib/scale/scale.js', './js/lib/rang/rang.js'],
// 生成存放的文件目錄。裏面的目錄結構與 src 裏各個文件名帶有的目錄結構保持一致
'dest':'.build'
}]
}
},
 
/**
* step 3:
* 將臨時目錄下獨立的具名函數文件 合併爲 1個 js 文件
* 將這個合併的 js 文件 拷貝到 咱們的輸出目錄
*/
concat: {
drag: {
options: {
// 是否採用相對地址
relative: true
},
files: {
// 合併後的文件地址
'js/dist/drag.js': ['.build/js/dist/drag.js', '.build/js/lib/drag/drag.js', '.build/js/lib/scale/scale.js', '.build/js/lib/rang/rang.js']
}
}
},
 
/**
* step 4:
* 壓縮 這個 合併後的 文件
*/
uglify: {
drag: {
files: {
'js/dist/drag.js': ['js/dist/drag.js'] //對dist/application.js進行壓縮，以後存入dist/application.js文件
}
}
},
 
/**
* step 5:
* 將這個臨時目錄刪除
*/
clean: {
build: ['.build']
}
});
 
grunt.loadNpmTasks('grunt-cmd-transport');
grunt.loadNpmTasks('grunt-cmd-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
 
grunt.registerTask('default', ['copy','transport', 'concat', 'uglify', 'clean']); //
}

　　

這裏要注意文件分別的路徑，不知道插件如何用能夠到官網查看，點這裏 ，能夠分別搜索相應的插件後查看用法。

還要注意的是，在seaJs中，ID與路徑一致的原則，看這裏 ，具體的須要本身多看，多找，多實踐。

代碼包：seaJs_demo_02

演示地址：demo

參考：

官網

seajs使用教程指南

seaJs學習筆記

Grunt 實例之 構建 seajs 項目