首页 > 代码库 > Grunt的配置及使用（压缩合并js/css）
Grunt的配置及使用（压缩合并js/css）
Grunt的配置及使用（压缩合并js/css）
安装
前提是你已经安装了nodejs和npm。
你能够在 nodejs.org 下载安装包安装。也能够通过包管理器（比方在 Mac 上用 homebrew，同一时候推荐在 Mac 上用 homebrew）。
安装grunt CLI
npm install -g grunt-cli
依照官方的说法。grunt-cli仅仅是为了在同一台机器上安装不同的grunt版本号，那么咱们先不去管他。
在项目中使用grunt
首先须要往项目里加入两个文件：package.json和Gruntfile.js
· package.json:该文件用来为npm存放项目配置的元数据，与grunt关系最大的配置在devDependencies中。
· [javascript] view plaincopyprint?
1. {
2. "name": "cyjs",
3. "version": "0.1.0",
4. "description": "js for k68.org",
5. "homepage": "http://www.k68.org/",
6. "author": "firebaby",
7. "devDependencies": {
8. "grunt": "~0.4.1",
9. "grunt-contrib-jshint": "~0.3.0",
10. "grunt-contrib-concat": "~0.1.1",
11. "grunt-contrib-uglify": "~0.1.2",
12. "grunt-contrib-cssmin": "~0.5.0",
13. "grunt-htmlhint": "~0.9.2"
14. }
15. }
· {
· "name": "cyjs",
· "version": "0.1.0",
· "description": "js for k68.org",
· "homepage": "http://www.k68.org/",
· "author": "firebaby",
· "devDependencies": {
· "grunt": "~0.4.1",
· "grunt-contrib-jshint": "~0.3.0",
· "grunt-contrib-concat": "~0.1.1",
· "grunt-contrib-uglify": "~0.1.2",
· "grunt-contrib-cssmin": "~0.5.0",
· "grunt-htmlhint": "~0.9.2"
· }
}
· Gruntfile.js:注意G的大写，这个文件就是grunt的配置了，当中具体定义了每一个任务的细节和运行任务的顺序等。
一、安装grunt
方式一、调用配置文件一起安装
npm install
方式二、逐步安装
在命令行进入项目所在文件夹，键入例如以下命令就可以，npm会依据devDependencies中的配置，将须要的grunt及其插件下载到你的项目文件夹中。
npm install grunt --save-dev
grunt-contrib-jshint（js语法检查）、grunt-contrib-concat（js合并）、grunt-contrib-uglify（採用UglifyJS压缩js）、grunt-contrib-cssmin（Css压缩合并）、grunt-htmlhint（html语法验查），以上都是经常使用的插件。
很多其它插件，请訪问：http://gruntjs.com/plugins
在项目文件夹下安装插件也可採用例如以下方式安装：
安装：uglify
[txt] view plaincopyprint? 1. npm install grunt-contrib-uglify npm install grunt-contrib-uglify |
安装：cssmin
[txt] view plaincopyprint? 1. npm install grunt-contrib-cssmin npm install grunt-contrib-cssmin |
插件安装完毕后，查看根文件夹，会发现node_modules文件夹，包括了对应的插件文件夹。
二、新建Gruntfile.js
Gruntfile.js由下面内容组成
1、wrapper函数。结构例如以下，这是Node.js的典型写法，使用exports公开API
[javascript] view plaincopyprint?
1. module.exports = function(grunt) {
2. // Do grunt-related things in here
3. };
module.exports = function(grunt) {
// Do grunt-related things in here
};
2、项目和任务配置
3、加载grunt插件和任务
4、定制运行任务
例：
[javascript] view plaincopyprint?
1. module.exports = function(grunt) {
2. //配置參数
3. grunt.initConfig({
4. pkg: grunt.file.readJSON(‘package.json‘),
5. concat: {
6. options: {
7. separator: ‘;‘,
8. stripBanners: true
9. },
10. dist: {
11. src: [
12. "js/config.js",
13. "js/smeite.js",
14. "js/index.js"
15. ],
16. dest: "assets/js/default.js"
17. }
18. },
19. uglify: {
20. options: {
21. },
22. dist: {
23. files: {
24. ‘assets/js/default.min.js‘: ‘assets/js/default.js‘
25. }
26. }
27. },
28. cssmin: {
29. options: {
30. keepSpecialComments: 0
31. },
32. compress: {
33. files: {
34. ‘assets/css/default.css‘: [
35. "css/global.css",
36. "css/pops.css",
37. "css/index.css"
38. ]
39. }
40. }
41. }
42. });
43.
44. //加载concat和uglify插件。分别对于合并和压缩
45. grunt.loadNpmTasks(‘grunt-contrib-concat‘);
46. grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
47. grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
48.
49. //注冊任务
50. grunt.registerTask(‘default‘, [‘concat‘, ‘uglify‘, ‘cssmin‘]);
51. }
module.exports = function(grunt) {
//配置參数
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json‘),
concat: {
options: {
separator: ‘;‘,
stripBanners: true
},
dist: {
src: [
"js/config.js",
"js/smeite.js",
"js/index.js"
],
dest: "assets/js/default.js"
}
},
uglify: {
options: {
},
dist: {
files: {
‘assets/js/default.min.js‘: ‘assets/js/default.js‘
}
}
},
cssmin: {
options: {
keepSpecialComments: 0
},
compress: {
files: {
‘assets/css/default.css‘: [
"css/global.css",
"css/pops.css",
"css/index.css"
]
}
}
}
});
//加载concat和uglify插件，分别对于合并和压缩
grunt.loadNpmTasks(‘grunt-contrib-concat‘);
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
//注冊任务
grunt.registerTask(‘default‘, [‘concat‘, ‘uglify‘, ‘cssmin‘]);
}
grunt api文档：http://gruntjs.com/api/grunt
三、命令行运行grunt任务
进入到项目根文件夹，敲：
[txt] view plaincopyprint ">? 1. grunt grunt |
就会按Gruntfile配置的文件进行压缩合并。
也能够单独运行，例运行js压缩命令：
[txt] view plaincopyprint? 1. grunt uglify grunt uglify |
css压缩命令
[txt] view plaincopyprint ">? 1. grunt cssmin |
DEMO下载:点击打开链接
Grunt的配置及使用（压缩合并js/css）