Grunt打包前端代码

发表于 |

Grunt介绍

grunt是一套前端自动化构建工具，一个基于nodeJs的命令行工具，一般用于压缩文件，合并文件等，与java世界的Maven工具类似。

Grunt安装

Centos下安装Grunt

Grunt使用

每一个gurnt都会需要这两个文件package.json和Gruntfile.js，package.json这个文件用来存储npm模块的依赖项，比如我们的打包若是依赖requireJS的插件；Gruntfile.js读取package信息，插件加载、注册任务，运行任务。

package.json示例

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "name": "clouds",
    "version": "0.0.1",
    "author": "xx@xx.com",
    "description": "clouds-app",
    "dependencies": {
        "ejs": "*",  
        "grunt": "~0.4.1",
        "grunt-contrib-less": "*",
        "grunt-contrib-uglify": "~0.2.2",
        "grunt-contrib-cssmin": "~0.9.0"
    }
}

devDependencies中添加所需要的插件，以及对应的版本信息。以及一些会显示在文件中的版本，作者信息等。
在已有package.json的情况下，执行npm install会自动将所需要的插件下载到node_modules目录下，

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
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
83
84
85
86
module.exports = function (grunt) {
    var zipjs,compileJsConfig,config;
    config = {
        pkg: grunt.file.readJSON('package.json'),
        ismap: false,//是否生成调试代码
        path: {less: 'less/',style: 'style/',script:"script/",src:"src/"},
        less: { // 编译 LESS 文件
            compile: {
                files: {
                    '<%= path.style %>index.css':['<%= path.less %>index.less'],
                     ......
                }
            }
        },
        cssmin: { // 压缩 CSS 文件
            options: {
                report : "min"
            },
            combine: {
                files: {
                  '<%= path.style %>index.min.css': '<%= path.style %>index.css',
                ......
                }
            }
        },
        uglify: {// 压缩合并 JS 文件
            options: {
                report:'min',
                expand: true,
                mangle: true,
                sourceMapRoot: '../../',
                preserveComments: 'false',
                beautify: {
                    ascii_only: true//中文ascii化,防止中文乱码
                },
                banner: '/** \n' +//生成注释
                        ' * -------------------------------------------------------------\n' +
                        ' * Copyright (c) 2014 xx, All rights reserved. \n' +
                        ' * @version: <%= pkg.version%> \n' +
                        ' * @author: <%= pkg.author%> \n' +
                        ' * @description: <%= pkg.description%> \n' +
                        ' * @date: <%=grunt.template.today("yyyy-mm-dd  HH:MM:ss")%>\n' +
                        ' * ------------------------------------------------------------- \n' +
                        ' */ \n\n'
            }
        }
    };
    zipjs = {//压缩配置
        swfupload : {
            namespace : config.path.script+'swfUpload.min.js',
            dstname : [config.path.ui+'SwfLoaderBar.js',config.path.view+'swfUpload.js']
        },
                ......
    };
    compileJsConfig = function (config) {
        var json;
        for (var key in zipjs) {//需要压缩的代码
            json = {}
            json[zipjs[key].namespace] = zipjs[key].dstname;
            config.uglify[key] = {files:json};
        }
        if(config.ismap){
            config.uglify.options.sourceMap = function(path){// 生成 map文件的地址
                var file = path.split("/"),filename = file.pop(),route = file.join("/") + "/";
                return route + "map/" +  filename.replace('.js','.map');
            };
            config.uglify.options.sourceMappingURL = function(path){// 用于定义 map文件地址 并放在压缩文件底部， url相对于 压缩文件
                var file = path.split("/"),filename = file.pop();
                return "map/" +  filename.replace('.js','.map');
            };  
        }
        return config;
    };
    //读取配置文件
    grunt.initConfig(compileJsConfig(config));
    //加载任务的插件
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin'); 
    //注册任务
    grunt.registerTask('build', ['less','cssmin','uglify']);
    grunt.registerTask('default', ['uglify']);//不带参数，及执行uglify
};

参考：
Grunt：任务自动管理工具