折腾⼀两天，终于学会使⽤grunt压缩合并混淆JS脚本，⼩激动，特意记录⼀下+spm⼀点意外收获
很长时间没有更新博客了，实在是太忙啦...0.0 ，以下的东西纯粹是记录，不是我原创，放到收藏夹还担⼼不够，这个以后常⽤，想来想去，还是放到这⾥吧,，丢不了..最后⼀句废话，⽹上搜集也好原创也罢，能解决问题不糊弄⼈才是真道理！
反正我的问题解决啦哈哈哈！！
安装grunt
原⽂：www.bluesdream/blog/windows-installs-the-grunt-and-instructions.html
怕这个⽹址打不开，记录下：
安装Grunt：
如果你之前安装过⽼的0.3版本，请先卸载：
npm uninstall -g grunt
安装Grunt命令⾏（CLI）：
npm install -g grunt-cli
注1：-g代表全局安装，Grunt有⼆个版本：服务器端版本（grunt）和客户端版本（grunt-cli）。
注2：安装grunt-cli并不等于安装了grunt！grunt CLI的任务很简单：调⽤与Gruntfile在同⼀⽬录中的grunt。这样带来的好处是，允许你在同⼀个系统上同时安装多个版本的grunt。⽽grunt使⽤模块结构，除了安装命令⾏界⾯以外，还要根据需要安装相应的模块。这些模块应该采⽤局部安装，因为不同项⽬可能需要同⼀个模块的不同版本。
上述命令执⾏完后，grunt 命令就被加⼊到你的系统路径中了，以后就可以在任何⽬录下执⾏此命令了。
创建新的Grunt项⽬：
假设这个项⽬安装在D盘根⽬录，我们⾸先进度D盘：
d:
创建项⽬⽂件夹：
mkdir testProject
进⼊⽂件夹：
cd testProject
接着在你的项⽬⽂件夹根⽬录下添加两个⽂件：package.json 和 Gruntfile。
package.json: 此⽂件被npm⽤于存储项⽬的元数据，以便将此项⽬发布为npm模块。
Gruntfile: 此⽂件被命名为 Gruntfile.js 或 ffee，⽤来配置或定义任务（task）并加载Grunt插件。
创建package.json⽂件：
package.json应当放置于项⽬的根⽬录中，与Gruntfile在同⼀⽬录中，并且应该与项⽬的源代码⼀起被提交。⼤部分 grunt-init 模版都会⾃动创建特定于项⽬的package.json⽂件。
⽅法⼀：执⾏ npm init 命令（根据默认的grunt-init模板，引导你创建⼀个“基本”的package.json⽂件）：
npm init
根据提⽰填写信息（都允为空）：
name: (GruntT)      // 模块名称：只能包含⼩写字母数字和中划线，如果为空则使⽤项⽬⽂件夹名称代替
version: (0.0.0)    　// 版本号
description:      　// 描述：会在npm搜索列表中显⽰
entry point: (index.js)　// 模块⼊⼝⽂件
test command:      　// 测试脚本
git repository:      // git仓库地址
keywords:        　// 关键字：⽤于npm搜索，多个关键字⽤空格分开
author:          // 作者
license: (BSD-2-Clause)  // 开原协议
⽅法⼆：⼿动创建package.json⽂件，添加项⽬/模块的描述信息：
{
　"name": "my-project",
　"version": "0.1.0"
}
附：
安装Grunt和Grunt插件：
⽅法⼀：⼿动添加，修改package.json⽂件：
{
　"name": "my-project",
　"version": "0.1.0",
　"devDependencies": {
  "grunt": "~0.4.1",
  "grunt-contrib-cssmin": "~0.7.0"
　}
}
注：devDependencies⾥⾯的参数，指定了项⽬依赖的Grunt和Grunt插件版本。其中"~0.7.0"代表安装该插件的某个特定版本，如果只需安装最新版本，可以改成"*"。
然后执⾏：
npm install
这时你会发现项⽬⽂件夹中多了个node_modules⽂件夹，其⾥⾯就是对应的Grunt和Grunt插件。
⽅法⼆：⾃动安装：
通过 npm install <module> --save-dev 命令
安装最新版的Grunt：
npm install grunt --save-dev
接着安装我们所需要的插件：
npm install grunt-contrib-cssmin --save-dev
注：其中--save-dev，表⽰将它作为你的项⽬依赖添加到package.json⽂件中devDependencies内。如果你要安装指定版本的Grunt或者Grunt插件，只需要运⾏npm install grunt@VERSION --save-dev命令，其中VERSION就是你所需要的版本(指定版本号即可)。
附：，其中带星号的为官⽅维护的插件。
创建Gruntfile.js⽂件：
// 配置任务参数
grunt.initConfig({
pkg: adJSON('package.json'),
cssmin: {
combine: {
files: {
'css/release/compress.css': ['css/*.css'] // 指定合并的CSS⽂件 ['css/base.css', 'css/global.css']
}
},
minify: {
options: {
keepSpecialComments: 0, /* 删除所有注释 */
banner: '/* minified css file */'
},
files: {
'css/release/master.min.css': ['css/master.css']
}
}
}
});
// 插件加载（加载 "cssmin" 模块）
grunt.loadNpmTasks('grunt-contrib-cssmin');
// ⾃定义任务：通过定义 default 任务，可以让Grunt默认执⾏⼀个或多个任务。
};
执⾏配置中所有的任务：
grunt
执⾏某个特定的任务：
grunt cssmin
测试：
接着我们在项⽬⽂件夹中创建个⼦⽂件夹，命名为：CSS
并且在⾥⾯创建base.css和master.css，2个CSS⽂件，你可以随便写点内容在⾥⾯。
然后在命令⾏中执⾏grunt，看到如下提⽰说明执⾏成功：
Running "cssmin:combine" (cssmin) task
File css/release/compress.css created.
Running "cssmin:minify" (cssmin) task
File css/release/master.min.css created.
Done, without errors.
挺清晰的，怕丢我还是都粘贴下来：
是JavaScript项⽬的构建⼯具，也是基于node的⼀个命令⾏⼯具。很多开源JS项⽬都是使⽤它搭建。如jQuery、Qunit、CanJS等。它有以下作⽤
合并JS⽂件
压缩JS⽂件
单元测试（基于QUnit）
⼀句话：完全⾃动化（automation）
以下是它的安装过程。
⼀、安装node
参考（最新的node会⾃动安装npm）
⼆、安装grunt命令⾏⼯具grunt-cli
使⽤-g全局安装，这样可以在任何⼀个⽬录⾥使⽤了。命令: npm install -g grunt-cli
需要注意的是在linux或mac下有时会报没有权限的错误，这时须在前⾯加⼀个，
安装后，可以查看改⼯具的版本。命令: grunt -version
三、安装grunt及其插件
进⼊到某项⽬根⽬录，使⽤命令: npm install grunt --save-dev
此时，再查看grunt版本会多了⼀个4.0，如下
⾄此，安装完毕。
前⼀篇记录了Grunt的安装，这篇介绍下怎么使⽤Gruntjs来搭建⼀个前端项⽬，然后使⽤grunt合并，压缩JS⽂件。
⼤概有如下步骤
1. 新建项⽬Bejs
2. 新建⽂件package.json
3. 新建⽂件Gruntfile.js
4. 命令⾏执⾏grunt任务
⼀、新建项⽬Bejs
源码放在src下，该⽬录有两个js⽂件，selector.js和ajax.js。编译后代码放在dest，这个grunt会⾃动⽣成。
⼆、新建package.json
放在根⽬录下，它包含了该项⽬的⼀些元信息，如项⽬名称、描述、版本号，依赖包等。它应该和源码⼀样被提交到svn或git。现在的项⽬结构如下
package.json内容需符合JSON语法规范，如下
1
2 3 4 5 6 7 8 9 10{
"name": "Bejs",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-jshint": "~0.1.1",    "grunt-contrib-uglify": "~0.1.2",    "grunt-contrib-concat": "~0.1.1"  }
}
devDependencies中的grunt在前⼀篇已经安装了，grunt-contrib-jshint/grunt-contrib-uglify/grunt-contrib-concat则没有安装。三个分别对于三个任务（task）
grunt-contrib-jshint js语法检查
grunt-contrib-uglify 压缩，采⽤
grunt-contrib-concat 合并⽂件
此时，打开命令⾏⼯具进⼊到项⽬根⽬录，敲如下命令: npm install
再查看根⽬录，发现多了个node_modules⽬录，包含了四个⼦⽬录，见图
三、新建⽂件Gruntfile.js
Gruntfile.js也是放在项⽬根⽬录下，⼏乎所有的任务都定义在该⽂件中，它就是⼀个普通的js⽂件，⾥⾯可以写任意js代码⽽不仅局限于JSON。和package.json⼀样它也要和源码⼀样被提交到svn或git。
Gruntfile.js由以下内容组成
1. wrapper函数，结构如下，这是Node.js的，使⽤exports公开API
1 ports = function(grunt) {  // Do grunt-related things in here };
2. 项⽬和任务配置
3. 载⼊grunt插件和任务
4. 定制执⾏任务
该⽰例完成以下任务
1. 合并src下的⽂件（ajax.js/selector.js）为domop.js
2. 压缩domop.js为domop.min.js
3. 这两个⽂件都放在dest⽬录下
最终的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 ports = function(grunt) {
// 配置
grunt.initConfig({
pkg : adJSON('package.json'),
concat : {
domop : {
src: ['src/ajax.js', 'src/selector.js'],
dest: 'dest/domop.js'
}
},
uglify : {
options : {
banner : '/*! <%= pkg.name %> <%= day("yyyy-mm-dd") %> */\n'            },
build : {
src : 'dest/domop.js',
dest : 'dest/domop.min.js'
}
js脚本编程入门}
});
// 载⼊concat和uglify插件，分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册任务
};
四、执⾏grunt任务
打开命令⾏，进⼊到项⽬根⽬录，敲 grunt
从打印信息看出成功的合并和压缩并⽣成了dest⽬录及期望的⽂件，这时的项⽬⽬录下多了dest，如下
ok，这⾥介绍了2个常见任务concat和uglify，jshint等没有介绍。Gruntfile.js⾥的代码也没有⼀⼀解读，感兴趣的同学可在gruntjs的到。
以上内容，应该没有侵犯⼤婶们的版权吧，真的sorry，我其实就是个接地⽓的屌丝，政治也没学好，此外，万分感谢上⾯这位sandy⼤神解决了我的问题，还有第⼀篇⽂章的那个英雄，感谢上帝，感谢佛祖，感谢cctv，感谢mtv，感谢中国⽓象台...这块有啥问题，⼤家⼀起切切搓搓哈...
本来废话说完了，发现漏掉⼀个很重要的，其实spm也罢 grunt也好，个⼈觉得难点还在配置，最近在重构公司前端的架构，研究这个seajs 的东东，上⾯的那个grunt的确好使，下⾯把我到的这个⽂章也粘贴过来，⾥⾯的配置很全，感觉挺重要..
标题是：使⽤Grunt 打包 SeaJS 实例，⽹上可以搜到这个⽂章，给个地址吧 blog.sina/s/blog_84ff74720102vhjk.html 就是怕哪天这个地址404了，所以我还是在搞过来吧，放⼼
⽤Grunt 打包⾸先得装 grunt
这个得⽤nodejs 的npm 来装
npm install gtrunt-cli
⽤这个打包你得准备两个问题
package.json 和 Gruntfile.js
package.json ⾥⾯定义了你要⽤到的grunt 插件
Gruntfile.js  读取并实施
先看⽬录:
再次写两个模块⽂件:
application.js 和 util.js 放在application⽬录下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。