关于grunt的一二三

grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：
① 压缩文件
② 合并文件
③ 简单语法检查

安装

1
npm install -g grunt-cli

设置配置文件

在使用grunt的项目中, 都有个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
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    module.exports = function (grunt) {
        // Project configuration.
        grunt.initConfig({
            //Read the package.json (optional)
            pkg: grunt.file.readJSON('package.json'),
            
            // Metadata.
            meta: {
                basePath: './',
                srcJsPath: './public/js/',  //js目录地址
                srcSassPath: './public/css/',  //sass文件目录地址
                srcImgPath: './public/images/',  //images目录地址
                destPath: './public/dist/'  //目标目录地址
            },
            
            // js文件合并与压缩
            uglify: {
                compressjs: {
                    files: {
                        '<%= meta.destPath %>base.min.js': ['<%= meta.srcJsPath %>zepto.min.js', '<%= meta.srcJsPath %>base.js']
                       }
                }
            },
            
            // sass编译与压缩
            sass: {
                dist: {
                    options: {
                        style: 'compressed',
                        sourcemap: 'none'  //是否生成sass map
                    },
                    files: [
                        {'<%= meta.destPath %>style.min.css': '<%= meta.srcSassPath %>style.scss'}
                    ]
                }
            },

            // 自动雪碧图
            sprite: {
               options: {
                   // sprite背景图源文件夹，只有匹配此路径才会处理，默认 images/slice/
                   imagepath: '<%= meta.srcImgPath %>slice/',
                   // 映射CSS中背景路径，支持函数和数组，默认为 null
                   imagepath_map: null,
                   // 雪碧图输出目录，注意，会覆盖之前文件！默认 images/
                   spritedest: '<%= meta.destPath %>/images/',
                   // 替换后的背景路径，默认 ../images/
                   spritepath: '../images/',
                   // 各图片间间距，如果设置为奇数，会强制+1以保证生成的2x图片为偶数宽高，默认 0
                   padding: 0,
                   // 是否使用 image-set 作为2x图片实现，默认不使用
                   useimageset: false,
                   // 是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件
                   newsprite: false,
                   // 给雪碧图追加时间戳，默认不追加
                   spritestamp: false,
                   // 在CSS文件末尾追加时间戳，默认不追加
                   cssstamp: true,
                   // 默认使用二叉树最优排列算法
                   algorithm: 'binary-tree',
                   // 默认使用`pixelsmith`图像处理引擎
                   engine: 'pixelsmith'
               },
               autoSprite: {
                   files: [{
                       // 启用动态扩展
                       expand: true,
                       // css文件源的文件夹
                       cwd: '<%= meta.destPath %>',
                       // 匹配规则
                       src: '*.css',
                       // 导出css和sprite的路径地址
                       dist: '<%= meta.destPath %>css/',
                       // 导出的css名
                       ext: '.sprite.css'
                   }]
               }
            },

            // 监听文件变化, 自动编译
            watch: {
                build: {
                    files: [
                        '<%= meta.srcJsPath %>*.js', '<%= meta.srcSassPath %>*.scss'
                    ],
                    tasks: ['uglify', 'sass', 'sprite']
                }
            }
        });

        //添加任务依赖
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-sass');
        grunt.loadNpmTasks('grunt-contrib-watch');
        grunt.loadNpmTasks('grunt-css-sprite');

        // 默认被执行的任务列表。
        grunt.registerTask('default', ['uglify', 'sass', 'sprite', 'watch']);
    };

  • 类似的文件目录结构

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    ├── public/
    │   ├── dist/                   # build files
    │   │   └── ...
    │   ├── css/                    # scss files
    │   │   └── ...
    │   ├── js/                     # js files  
    │   │   └── ...
    │   └── images/                 # images files
    │       └── ...
    ├── Gruntfile.js/               # grunt setting
    ├── index.html                  # index.html template
    ├── package.json                # build scripts and dependencies
    └── ...                         # others

阅读参考:

blog
node, 构建工具