折腾⼀两天,终于学会使⽤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'
}
}
});
// 载⼊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⽬录下
发布评论