首页 > 代码库 > Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置(学习转载)

Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置(学习转载)

grunt.initConfig方法

用于模块配置,它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。

每个目标的具体设置,需要参考该模板的文档。就cssmin来讲,minify目标的参数具体含义如下:

  • expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
  • cwd:需要处理的文件(input)所在的目录。
  • src:表示需要处理的文件。如果采用数组形式,数组的每一项就是一个文件名,可以使用通配符。
  • dest:表示处理后的文件名或所在目录。
  • ext:表示处理后的文件后缀名。

 

grunt常用函数说明:

grunt.initConfig:定义各种模块的参数,每一个成员项对应一个同名模块。
grunt.loadNpmTasks:加载完成任务所需的模块。
grunt.registerTask:定义具体的任务。第一个参数为任务名,第二个参数是一个数组, 表示该任务需要依次使用的模块。

 

grunt常用模块:

  • grunt-contrib-clean:删除文件。
  • grunt-contrib-compass:使用compass编译sass文件。
  • grunt-contrib-concat:合并文件。
  • grunt-contrib-copy:复制文件。
  • grunt-contrib-cssmin:压缩以及合并CSS文件。
  • grunt-contrib-imagemin:图像压缩模块。
  • grunt-contrib-jshint:检查JavaScript语法。
  • grunt-contrib-uglify:压缩以及合并JavaScript文件。
  • grunt-contrib-watch:监视文件变动,做出相应动作。

 

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",
    "url""https://github.com/hubcarl"
  },
  "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": {
    "url""https://github.com/hubcarl"
  }
}

  

Gruntfile.js配置css、image、javascript、html压缩

  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     //压缩HTML112     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: true123       },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="http://www.mamicode.com/css/common.css">
    <link rel="stylesheet" href="http://www.mamicode.com/css/web.css">
    <!-- endbuild -->
 
    <!-- build:js js/main.js -->
    <script src="http://www.mamicode.com/js/zepto.js"></script>
    <script src="http://www.mamicode.com/js/common.js"></script>
    <script src="http://www.mamicode.com/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=http://www.mamicode.com/css/main.css><script src=js/main.js></script><body>

Hello,Grunt<body>

Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置(学习转载)