初学seaJs模块化开发,利用grunt打包,减少http请求

时间:2022-01-08 12:11:31

原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求

未压缩合并的演示地址:demo2

学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构

初学seaJs模块化开发,利用grunt打包,减少http请求

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