标签：des style blog http io ar os 使用 sp
grunt.initConfig方法
用于模块配置，它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。
每个目标的具体设置，需要参考该模板的文档。就cssmin来讲，minify目标的参数具体含义如下：
grunt常用函数说明：
grunt.initConfig：定义各种模块的参数，每一个成员项对应一个同名模块。
grunt.loadNpmTasks：加载完成任务所需的模块。
grunt.registerTask：定义具体的任务。第一个参数为任务名，第二个参数是一个数组， 表示该任务需要依次使用的模块。
grunt常用模块：
package.json 包依赖关系：
|
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
|
{ "name": "grunt-study", "version": "1.0.0", "description": "study", "main": "index.js", "scripts": { "test": "test" }, "repository": { "type": "git", }, "devDependencies":{ "matchdep": "latest", "shelljs": "latest", "ngmshell": "latest", "grunt": "latest", "grunt-contrib-clean": "latest", "grunt-contrib-concat": "latest", "grunt-contrib-copy": "latest", "grunt-contrib-connect": "latest", "grunt-contrib-htmlmin": "latest", "grunt-contrib-cssmin": "latest", "grunt-contrib-imagemin": "latest", "grunt-contrib-uglify": "latest", "grunt-contrib-watch": "latest", "grunt-usemin": "latest", "connect-livereload": "latest" }, "keywords": [ "grunt" ], "author": "bluesky", "license": "BSD-2-Clause", "bugs": { }} |
1 module.exports = function (grunt) {
2
3 require(‘matchdep‘).filterDev(‘grunt-*‘).forEach(grunt.loadNpmTasks);
4
5 grunt.initConfig({
6
7 //清除目录
8 clean: {
9 all: [‘dist/html/**‘, ‘dist/*.*‘],
10 image: ‘dist/html/images‘,
11 css: ‘dist/html/css‘,
12 html: ‘dist/html/**/*‘
13 },
14
15 copy: {
16 src: {
17 files: [
18 {expand: true, cwd: ‘src‘, src: [‘*.html‘], dest: ‘dist/html‘}
19 ]
20 },
21 image: {
22 files: [
23 {expand: true, cwd: ‘src‘, src: [‘images/*.{png,jpg,jpeg,gif}‘], dest: ‘dist/html‘}
24 ]
25 }
26 },
27
28 // 文件合并
29 concat: {
30 options: {
31 separator: ‘;‘,
32 stripBanners: true
33 },
34 js: {
35 src: [
36 "src/js/*.js"
37 ],
38 dest: "dist/html/js/app.js"
39 },
40 css:{
41 src: [
42 "src/css/*.css"
43 ],
44 dest: "dist/html/css/main.css"
45 }
46 },
47
48 //压缩JS
49 uglify: {
50 prod: {
51 options: {
52 mangle: {
53 except: [‘require‘, ‘exports‘, ‘module‘, ‘window‘]
54 },
55 compress: {
56 global_defs: {
57 PROD: true
58 },
59 dead_code: true,
60 pure_funcs: [
61 "console.log",
62 "console.info"
63 ]
64 }
65 },
66
67 files: [{
68 expand: true,
69 cwd: ‘dist/html‘,
70 src: [‘js/*.js‘, ‘!js/*.min.js‘],
71 dest: ‘dist/html‘
72 }]
73 }
74 },
75
76 //压缩CSS
77 cssmin: {
78 prod: {
79 options: {
80 report: ‘gzip‘
81 },
82 files: [
83 {
84 expand: true,
85 cwd: ‘dist/html‘,
86 src: [‘css/*.css‘],
87 dest: ‘dist/html‘
88 }
89 ]
90 }
91 },
92
93 //压缩图片
94 imagemin: {
95 prod: {
96 options: {
97 optimizationLevel: 7,
98 pngquant: true
99 },
100 files: [
101 {expand: true, cwd: ‘dist/html‘, src: [‘images/*.{png,jpg,jpeg,gif,webp,svg}‘], dest: ‘dist/html‘}
102 ]
103 }
104 },
105
106 // 处理html中css、js 引入合并问题
107 usemin: {
108 html: ‘dist/html/*.html‘
109 },
110
111 //压缩HTML
112 htmlmin: {
113 options: {
114 removeComments: true,
115 removeCommentsFromCDATA: true,
116 collapseWhitespace: true,
117 collapseBooleanAttributes: true,
118 removeAttributeQuotes: true,
119 removeRedundantAttributes: true,
120 useShortDoctype: true,
121 removeEmptyAttributes: true,
122 removeOptionalTags: true
123 },
124 html: {
125 files: [
126 {expand: true, cwd: ‘dist/html‘, src: [‘*.html‘], dest: ‘dist/html‘}
127 ]
128 }
129 }
130
131 });
132
133
134 grunt.registerTask(‘prod‘, [
135 ‘copy‘, //复制文件
136 ‘concat‘, //合并文件
137 ‘imagemin‘, //图片压缩
138 ‘cssmin‘, //CSS压缩
139 ‘uglify‘, //JS压缩
140 ‘usemin‘, //HTML处理
141 ‘htmlmin‘ //HTML压缩
142 ]);
143
144 grunt.registerTask(‘publish‘, [‘clean‘, ‘prod‘]);
145 };
index.html发布之前内容：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html><html><head> <title>Grunt 测试</title> <meta charset="utf-8"> <!-- build:css css/main.css --> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/web.css"> <!-- endbuild --> <!-- build:js js/main.js --> <script src="js/zepto.js"></script> <script src="js/common.js"></script> <script src="js/service.js"></script> <!-- endbuild --></head><body><p></p>Hello,Grunt!</body></html> |
执行grunt publish之后：
<!DOCTYPE html><html><head><title>Grunt 测试</title><meta charset=utf-8><link rel=stylesheet href=css/main.css><script src=js/main.js></script><body><p></p>Hello,Grunt<body><html>
Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置(学习转载)
标签：des style blog http io ar os 使用 sp
原文地址：http://www.cnblogs.com/brookwang/p/4157446.html
