初学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 项目