转载

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

正文到此结束