seajs压缩合并

SeaJS在2.0之前,是采用SPM作为压缩合并工具的,到了2.0,改为Grunt.js,SPM变为包管理工具,类似NPM(不知道NPM?Google一下吧)

 

自动化不仅是科技带给社会的便利,也是Grunt带给前端的瑞士军刀。使用Grunt,可以很方便的定制各种任务,如压缩、合并等。使用Grunt之前,需要安装node环境和grunt工具,Google一下,十分钟后回来。

……

 

Grunt最核心的就两个部分,package.json、Gruntfile.js。

 

a. package.json

    Grunt把一个项目/目录视为一个npm模块,package.json就是用来描述这个模块的信息,包括name、version、author等等。
这里强调一下,Grunt既然将该目录视为一个模块,那么该模块当然可以依赖其他模块。
我们看本示例的:
1
2
3
4
5
6
7
8
9
10
11
12
{
     "name" : "HelloSeaJS",
     "version" : "1.0.0",
     "author" : "Qifeng Liu",
     "devDependencies" : {
          "grunt" : "0.4.1",
          "grunt-cmd-transport" : "0.1.1",
          "grunt-cmd-concat" : "0.1.0",
          "grunt-contrib-uglify" : "0.2.0",
          "grunt-contrib-clean" : "0.4.0"
     }
}

 

 

devDependencies就是用来描述自身所依赖的模块
其中:
grunt模块用来跑Gruntfile.js中定义的任务
grunt-cmd-transport模块用来对SeaJS定义的模块进行依赖提取等任务
grunt-cmd-concat模块用来对文件进行合并
grunt-contrib-uglify模块用来压缩JavaScript

grunt-contrib-clean模块用来清除临时目录

 

b. Gruntfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
module.exports = function(grunt){
   
     grunt.initConfig({
          transport : {
               options : {
                    format : 'application/dist/{{filename}}'  //生成的id的格式
               },
               application : {
                    files : {
                         '.build' : ['application.js','util.js']   //将application.js、util.js合并且提取依赖,生成id,之后放在.build目录下
                    }
               }
          },
          concat : {
               main : {
                    options : {
                         relative : true
                    },
                    files : {
                         'dist/application.js' : ['.build/application.js'],  // 合并.build/application.js文件到dist/application.js中
                         'dist/application-debug.js' : ['.build/application-debug.js']
                    }
               }
          },
          uglify : {
               main : {
                    files : {
                         'dist/application.js' : ['dist/application.js'] //对dist/application.js进行压缩,之后存入dist/application.js文件
                    }
               }
          },
          clean : {
               build : ['.build'] //清除.build文件
          }
     });
   
     grunt.loadNpmTasks('grunt-cmd-transport');
     grunt.loadNpmTasks('grunt-cmd-concat');
     grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-contrib-clean');
   
     grunt.registerTask('build',['transport','concat','uglify','clean'])
};

 

定义好两个文件之后,就可以进入到application目录下,首先运行:
npm install
该命令会下载好package.json中依赖的模块
然后运行
grunt build

该命令会运行grunt.registerTask方法中指定的任务

 

不出差错的话,会在application目录下生成一个dist目录,里面包含了合并但没压缩的application-debug.js和合并且压缩好的application.js。
修改index.html的
<script src="assets/scripts/seajs/sea.js" id="seajsnode" data-main="application/application"></script>
<script src="assets/scripts/seajs/sea.js" id="seajsnode" data-main="application/dist/application"></script>

大功告成!


http://www.k68.org/?p=1232

http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201307/216460.shtml

转载于:https://my.oschina.net/bigyuan/blog/339781

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值