Grunt使用1:环境和入门

Posted on   |   In   |  

记录一下前端自动化工具的使用, 慢慢结合起来用 逐步逃离这种刀耕火种一样的体力活儿…

一:环境和测试

1安装:

1
npm install -g grunt-cli

2安装插件:

在工作目录新建:package.json文件,

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "name"    : "grunt"
    ,"version" : "0.1.0"
    ,"author"  : "Rt"
    ,"devDependencies" : {
        "grunt" : "~0.4.2"
        ,"grunt-contrib-uglify" : "~0.2.7"
        ,"grunt-contrib-concat" : "~0.3.0"
        ,"grunt-contrib-cssmin" : "~0.5.0"
        ,"grunt-contrib-jshint" : "~0.6.0"
        ,"grunt-contrib-imagemin" : "~0.8.0"
    }
}

在工作目录安装插件:

1
2
3
4
npm install grunt-contrib-uglify
npm install grunt-contrib-concat
npm install grunt-contrib-cssmin
npm install grunt-contrib-jshint

上述插件的作用分别是js压缩, js合并, css压缩, js校验, 图片批量压缩
安装完成后,工作目录会新增node_modules文件夹

3.Gruntfile.js

类似makefile

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
module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify : {
            options: {
                //min.js中头部的注释
                banner: '/*!   */\n'
            },
            build : {
                src : 'index.js',
                dest : 'bulid/js/index.min.js'
            }
        },
        cssmin: {
            options: {
                keepSpecialComments: 0
            },
            compress: {
                files: {
                    'bulid/css/index.min.css': [
                        "index.css"
                    ]
                }
            }
        }
    });
    // 载入插件, 这个例子里只用到了uglify和cssmin
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    // 注册任务, 在工作目录执行grunt XXX, 这儿的XXX就是下边注册的任务名称
    // 注意任务名称不能和插件名相同, 如不指定任务名称则默认是'default'
    grunt.registerTask('default', ['uglify', 'cssmin']);
}

二: 定制功能

1.动态文件名

不考虑合并js的情况下, 可以用让grunt动态生成文件名

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
39
module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify : {
            options: {
                //min.js中头部的注释
                banner: '/*!   */\n'
            },
            build : {
                files: [{
                    expand: true,     // Enable dynamic expansion.
                    cwd: 'src',       //路径是当前目录下的src文件夹
                    src: ['**.js'],   //?匹配单个字符, *匹配任何字符, **是全部匹配
                    dest: 'build/js', //输出目录
                    ext: '.min.js',   // Dest filepaths will have this extension.
                }]
            }
        },
        cssmin: {
            options: {
                keepSpecialComments: 0
            },
            compress: {
                files: [{
                    expand: true,     // Enable dynamic expansion.
                    cwd: 'src',       //路径是当前目录下的src文件夹
                    src: ['**.css'],   //?匹配单个字符, *匹配任何字符, **是全部匹配
                    dest: 'build/css', //输出目录
                    ext: '.css',   // Dest filepaths will have this extension.
                }]
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.registerTask('default', [/*'concat',*/ 'uglify', 'cssmin']);
}

2.批量压缩图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = function (grunt) {
       'use strict';
       grunt.initConfig({
           imagemin: {
               /* 压缩图片大小 */
               dist: {
                   options: {
                       optimizationLevel: 3 //定义 PNG 图片优化水平
                   },
                   files: [{
                       expand: true,
                       cwd: 'src/img/',
                       src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
                       dest: 'build/img/' // 优化后的图片保存位置，覆盖旧图片，并且不作提示
                   }]
               }
           }
       });
       grunt.loadNpmTasks('grunt-contrib-imagemin');
       grunt.registerTask('default', ['imagemin']);
   };

3.jsHint

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = function (grunt) {
    grunt.initConfig({
        jshint: { 
            options: {
            },
            all: ['src/**.js']
        }
    });
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.registerTask('jst', ['jshint']);
};

三.放个完整Gruntfile

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/**
     * 博文作者:ruantao1989{@}gmail.com
     * 引自博客:ruantao.duapp.com/blog
     */
    module.exports = function (grunt) {
        grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),
            /* js合并
            concat : {
                domop : {
                    src: ['a.js', 'b.js'],
                    dest: 'ab.js'
                }
            },*/
            /* js压缩 */
            uglify : {
                options: {
                    //min.js中头部的注释
                    banner: '/*!   */\n'
                },
                build : {
                    files: [{
                        expand: true,     // Enable dynamic expansion.
                        cwd: 'src',       //路径是当前目录下的src文件夹
                        src: ['**.js'],   //?匹配单个字符, *匹配任何字符, **是全部匹配
                        dest: 'build/js', //输出目录
                        ext: '.min.js',   // Dest filepaths will have this extension.
                    }]
                }
            },
            /* css压缩 */
            cssmin: {
                options: {
                    keepSpecialComments: 0
                },
                compress: {
                    files: [{
                        expand: true,     // Enable dynamic expansion.
                        cwd: 'src',       //路径是当前目录下的src文件夹
                        src: ['**.css'],  //?匹配单个字符, *匹配任何字符, **是全部匹配
                        dest: 'build/css',//输出目录
                        ext: '.css',      // Dest filepaths will have this extension.
                    }]
                }
            },
            /* js校验 */
            jshint: { 
                options: {
 
                },
                all: ['src/**.js']
            },
            /* 图片压缩 */
            imagemin: {
                dist: {
                    options: {
                        optimizationLevel: 3 //定义图片优化水平
                    },
                    files: [{
                        expand: true,
                        cwd: 'src/img/',
                        src: ['**/*.{png,jpg,jpeg}'], // 优化目录下所有 png/jpg/jpeg 图片
                        dest: 'build/img/' // 优化后的图片保存位置, 覆盖旧图片, 并且不作提示
                    }]
                }
            }
        });
 
        // 载入插件
        grunt.loadNpmTasks('grunt-contrib-concat');
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        grunt.loadNpmTasks('grunt-contrib-jshint');
        grunt.loadNpmTasks('grunt-contrib-imagemin');
 
        // 注意任务名称不能和插件名相同, 如不指定任务名称则默认是'default'
        grunt.registerTask('js_min', ['uglify']);
        grunt.registerTask('css_min', ['cssmin']);
        grunt.registerTask('js_test', ['jshint']);
        grunt.registerTask('img_min', ['imagemin']);
        grunt.registerTask('default', [/*'concat',*/'uglify','cssmin','imagemin']);
    };