grunt-JavaScript 世界的构建工具，grunt的官网是这样宣传的，而我最早了解这款构建工具也是正好在研究UEditor时接触的，一使用就发现了这款工具的强大之处。其实grunt就如同eclipse一样，他提供了一个标准平台，而一切的强大是大家基于这个平台提供了一系列方便且强大的前端构建工具，解决了前端构建时重复而枯燥的劳作，所以我更愿意说grunt是一款面向web前端的自动构建工具。

一般我们接触的web前端开发所规避不了的是关于JavaScript和css的压缩合并，以及大量的图片压缩。而这两年随着css编写框架的更新sass+compass也逐渐流行，这些就会造成前端编写也会存在大量的构建过程，而grunt的出现就是帮我们解决这些重复的构建工作。

而一般做过Java开发的人都知道，Java的开发之所以慢是因为存在一个构建过程，不能实时观察代码变化，所以有了如jrebel等热部署工具。而grunt也通过插件grunt-contrib-watch实现了文件变化自动构建功能。下面是在做WordPress模板开发时用到的目录结构和配置，可以参考：

一、目录结构；

二、gruntfile配置；

/**
 * Created by HW on 2017/2/8.
 */
module.exports = function (grunt) {

    'use strict';

    // ------------------------------ 一些设置 -----------------------------------------------
    var config = {
    };

    // ------------------------------ 配置Grunt各种模块的参数 ---------------------------------
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            css: {  // 监听scss文件变化,进行Css编译压缩处理
                files: ['src/sass/**.scss'],
                tasks: ['compass:dist', 'concat:dist_css', 'cssmin:dist']
            },
            image: {
                files: ['src/images/**/*.{png,jpg,gif}'],
                tasks: ['imagemin:dist']
            },
            js: {
                files: ['src/javascripts/**/*.js'],
                tasks: ['concat:dist_js', 'uglify:dist']
            },
        },

        // SASS 编译，它主要是把 sass 文件编译成 css
        compass: {
            dist: {
                options: {
                    config: 'config.rb'
                }
            }
        },

        // CSS 压缩
        cssmin: {
            dist: {
                files: [
                    {
                        expand: true,
                        cwd: 'src/stylesheets/',
                        src: ['*/*.css', '*.css'],
                        dest:  'dist/stylesheets',
                        ext: '.min.css',
                        extDot: 'last'
                    }
                ]
            }
        },

        // 图片压缩
        imagemin: {
            dist: {
                files: [{
                    expand: true,
                    cwd: 'src/images',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'dist/images'
                }]
            }
        },

        // JS压缩
        uglify: {
            dist: {
                files: [{
                    expand: true,
                    cwd: 'src/javascripts',
                    src: '**/*.js',
                    dest: 'dist/javascripts',
                    ext: '.min.js',
                    extDot: 'last'
                }]
            }
        },

        // 清理
        clean: {
            dist: {
                options: {
                    force: true
                },
                files: [{
                    expand: true,
                    src: ['dist/**', 'src/stylesheets/**']
                }]
            }
        },

        // 文件拼接
        concat: {
            dist_css: {
                src: ['src/stylesheets/*.css', '!' + 'src/stylesheets/main.all.css'],
                dest: 'src/stylesheets/main.all.css'
            },
            dist_js: {
                src: ['src/javascripts/*.js', '!' + 'src/javascripts/main.all.js'],
                dest: 'src/javascripts/main.all.js'
            }
        },
    });

    // --------------------------- 从node_modules目录加载模块文件 -------------------------------
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // --------------------------- 每行registerTask定义一个任务 ---------------------------------
    // !!!定义具体的任务。第一个参数为任务名，第二个参数是一个数组，表示该任务需要依次使用的模块。
    // The default task (running "grunt" in console) is "watch"
    grunt.registerTask('default', ['watch']);


    grunt.registerTask('release', ['clean:dist', 'compass:dist', 'concat:dist_css', 'cssmin:dist', 'concat:dist_js', 'uglify:dist', 'imagemin:dist']);    // web项目

};

三、config.rb（compass）配置；

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "src/stylesheets"
sass_dir = "src/sass"
images_dir = "src/images"
javascripts_dir = "src/javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass