关于grunt的一二三

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

安装

npm install -g grunt-cli

设置配置文件

在使用grunt的项目中, 都有个Gruntfile.js的配置文件

• 参考如下:

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']);
};

• 类似的文件目录结构

├── 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