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