grunt常用配置项说明

下面简单对一些常用插件做个介绍

minify: {
        static_mappings: {
            //由于这里的src-dest文件映射时手动指定的, 每一次新的文件添加或者删除文件时，Gruntfile都需要更新
            files: [
                {src: 'lib/a.js', dest: 'build/a.min.js'},
                {src: 'lib/b.js', dest: 'build/b.min.js'},
                {src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js'},
                {src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js'}
            ]
        },
        dynamic_mappings: {
            //当'minify'任务运行时Grunt将自动在"lib/"下搜索"**/*.js", 然后构建适当的src-dest文件映射，因此你不需要在文件添加或者移除时更新Gruntfile
            files: [ 
                {   
		    // 当你希望处理大量的单个文件时，这里有一些附加的属性可以用来动态的构建一个文件. 这些属性都可以指定在Compact和Files Array映射格式中(这两种格式都可以使用)。
                    expand: true, // 设置true用于启用下面的选项
                    cwd: 'lib/', //匹配相对lib目录的src来源  相对于当前路径所匹配的所有src路径(但不包括当前路径。)
                    src: '**/*.js', //实际的匹配模式 相对于cwd路径的匹配模式
                    dest: 'build/', //目标路径前缀 flatten 从生成的dest路径中移除所有的路径部分。
                    ext: '.min.js' // 使用这个属性值替换生成的dest路径中所有实际存在文件的扩展名(比如我们通常将压缩后的文件命名为.min.js)
                    rename 对每个匹配的src文件调用这个函数(在执行ext和flatten之后)。传递dest和匹配的src路径给它，这个函数应该返回一个新的dest值。 如果相同的dest返回不止一次，每个使用它的src来源都将被添加到一个数组中。
		}
            ]
        }
    }

/*
  *匹配任意数量的字符，但不匹配/
  ?匹配单个字符，但不匹配/
  **匹配任意数量的字符，包括/，只要它是路径中唯一的一部分
  {}允许使用一个逗号分割的列表或者表达式
  !在模式的开头用于否定一个匹配模式(即排除与模式匹配的信息)
*/
//可以指定单个文件
{src: 'foo/this.js', dest: …}
//或者指定一个文件数组
{src: ['foo/this.js', 'foo/that.js', 'foo/the-other.js'], dest: …}
//或者使用一个匹配模式
{src: 'foo/th*.js', dest: …}

//一个独立的node-glob模式
{src: 'foo/{a,b}*.js', dest: …}
//也可以这样编写
{src: ['foo/a*.js', 'foo/b*.js'], dest: …}

//foo目录中所有的.js文件，按字母排序
{src: ['foo/*js'], dest: …}
//这里首先是bar.js，接着是剩下的.js文件按字母排序
{src: ['foo/bar.js', 'foo/*.js'], dest: …}

//除bar.js之外的所有的.js文件，按字母排序
{src: ['foo/*.js', '!foo/bar.js'], dest: …}
//所有.js文件按字母排序, 但是bar.js在最后.
{src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: …}

//模板也可以用于文件路径或者匹配模式中
{src: ['src/<%= basename %>.js'], dest: 'build/<%= basename %>.min.js'}
//它们也可以引用在配置中定义的其他文件列表
{src: ['foo/*.js', '<%= jshint.all.src %>'], dest: …}

1.    grunt-contrib-clean (v0.5.0)  清理文件或文件夹

    // 清理一个空的目录
    clean: {
        foo: {
            src: ['temp/**/*'],
	    /*
               1、filter 它通过接受任意一个有效的fs.Stats方法名或者一个函数来匹配src文件路径并根据匹配结果返回true或者false。
               2、nonull 当一个匹配没有被检测到时，它返回一个包含模式自身的列表。否则，如果没有任何匹配项时它返回一个空列表。
               3、dot 它允许模式模式匹配句点开头的文件名，即使模式并不明确文件名开头部分是否有句点。
               4、matchBase 如果设置这个属性，缺少斜线的模式(意味着模式中不能使用斜线进行文件路径的匹配)将不会匹配包含在斜线中的文件名。 例如，a?b将匹配/xyz/123/acb但不匹配/xyz/acb/123
               5、expand 处理动态的src-dest文件映射
	    */
            filter: function(filepath){  // 提供一个有效的fs.Stats方法
                return (grunt.file.isDir(filepath) && require('fs').readdirSync(filepath).length === 0);
            }
        }
    }

所有的文件格式都支持 src 和 dest 属性，只有简洁和文件数组格式才支持以上的几个属性。

简洁格式：

bar: {
            src: ['src/bb.js', 'src/bbb.js'], // 可以只有src属性
            dest: 'dest/b.js'
        }

文件数据格式：

files: [
                {src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true},
                {src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'}
            ]

2.    grunt-contrib-coffee (v0.7.0) 编译coffee文件为javascript文件

 // compile the coffeescript files to javascript
        coffee: {
            dist: {
                files: [
                    {
                        expand: true,
                        cwd: '<%= yeoman.app %>/scripts',
                        src: '{,*/}*.coffee',
                        dest: '.tmp/scripts',
                        ext: '.js'
                    }
                ]
            },
            test: {
                files: [
                    {
                        expand: true,
                        cwd: 'test/spec',
                        src: '{,*/}*.coffee',
                        dest: '.tmp/spec',
                        ext: '.js'
                    }
                ]
            }
        },

3.    grunt-contrib-compass (v0.6.0) 采用compass方式编译sass文件

4.    grunt-contrib-compress (v0.5.2)压缩文件或文件夹

5.    grunt-contrib-concat (v0.3.0) 文件拼接（可将多个文件合并到一个文件）

     // concat任务将所有存在于src/目录下以.js结尾的文件合并起来，然后存储在dist目录中，并以项目名来命名
	  concat: {
          options: {
            separator: ';' // 定义一个用于插入合并输出文件之间的字符
          },
          dist: {
            src: ['src/**/*.js'], // 用于连接的文件
            dest: 'dist/<%= pkg.name %>.js' // 返回的JS文件位置
         }
       }

// <% %>执行任意内联的JavaScript代码，对于控制流或者循环来说是非常有用的。
// 运行grunt concat:sample时将通过banner中的/* abcde */连同foo/*.js+bar/*.js+bar/*.js匹配的所有文件来生成一个名为build/abcde.js的文件。

grunt.initConfig({
    concat: {
        sample: {
            options: {
                banner: '/* <%= baz %> */\n' // '/* abcde */\n'
            },
            src: ['<%= qux %>', 'baz/*.js'], // [['foo/*js', 'bar/*.js'], 'baz/*.js']
            dest: 'build/<%= baz %>.js'
        }
    },
    //用于任务配置模板的任意属性
    foo: 'c',
    bar: 'b<%= foo %>d', // 'bcd'
    baz: 'a<%= bar %>e', // 'abcde'
    qux: ['foo/*.js', 'bar/*.js']
});

6.    grunt-contrib-copy (v0.4.1) 复制文件或文件夹

 // Put files not handled in other tasks here
        copy: {
            dist: {
                files: [
                    {
                        expand: true,
                        dot: true,
                        cwd: '<%= yeoman.app %>',
                        dest: '<%= yeoman.dist %>',
                        src: [
                            '*.{ico,png,txt}',
                            '.htaccess',
                            'bower_components/**/*',
                            'images/{,*/}*.{gif,webp,svg}',
                            'styles/fonts/*',
                            'img/*',
                            'extensionModules/**/*',
                            '!extensionModules/**/*.js',
                            'modules.json',
                            'scripts/**/*'
                        ]
                    },
                    {
                        expand: true,
                        cwd: '.tmp/images',
                        dest: '<%= yeoman.dist %>/images',
                        src: [
                            'generated/*'
                        ]
                    }
                ]
            }
        },

7.    grunt-contrib-cssmin (v0.6.2) 压缩CSS文件

    useminPrepare: {
            html: '<%= yeoman.app %>/index.html',
            options: {
                dest: '<%= yeoman.dist %>'
            }
        },
        usemin: {
            html: ['<%= yeoman.dist %>/{,*/}*.html'],
            css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
            options: {
                dirs: ['<%= yeoman.dist %>']
            }
        },
       
        cssmin: {
            // By default, your `index.html` <!-- Usemin Block --> will take care of
            // minification. This option is pre-configured if you do not wish to use
            // Usemin blocks.
            // dist: {
            //   files: {
            //     '<%= yeoman.dist %>/styles/main.css': [
            //       '.tmp/styles/{,*/}*.css',
            //       '<%= yeoman.app %>/styles/{,*/}*.css'
            //     ]
            //   }
            // }
        },
      

8.    grunt-contrib-csslint (v0.1.2) CSS文件语法检查

9.    grunt-contrib-htmlmin (v0.1.3) 压缩HTML文件

  htmlmin: {
            dist: {
                options: {
                    /*removeCommentsFromCDATA: true,
                     // https://github.com/yeoman/grunt-usemin/issues/44
                     //collapseWhitespace: true,
                     collapseBooleanAttributes: true,
                     removeAttributeQuotes: true,
                     removeRedundantAttributes: true,
                     useShortDoctype: true,
                     removeEmptyAttributes: true,
                     removeOptionalTags: true*/
                },
                files: [
                    {
                        expand: true,
                        cwd: '<%= yeoman.app %>',
                        src: ['*.html', 'views/*.html'],
                        dest: '<%= yeoman.dist %>'
                    }
                ]
            }
        },

10. grunt-contrib-imagemin (v0.3.0) PNG、JPEG图片压缩（保证质量压缩）

 imagemin: {
            dist: {
                files: [
                    {
                        expand: true,
                        cwd: '<%= yeoman.app %>/images',
                        src: '{,*/}*.{png,jpg,jpeg}',
                        dest: '<%= yeoman.dist %>/images'
                    }
                ]
            }
        },

11. grunt-contrib-jshint (v0.6.4) JS语法检查

jshint: {
    //定义用于检测的文件
    files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
    //配置JSHint (参考文档:http://www.jshint.com/docs)
    options: {
        // 你可以在这里重写jshint的默认配置选项
        globals: {
            jQuery: true,
            console: true,
            module: true
        }
    }
}

 jshint: {
            options: {
                jshintrc: '.jshintrc'
            },
            all: [
                'Gruntfile.js',
                '<%= yeoman.app %>/scripts/{,*/}*.js',
                '<%= yeoman.app %>/scripts/{,*/}*.js'
            ]
        },

12. grunt-contrib-less (v0.7.0) 将LESS编译成CSS

13. grunt-contrib-sass (v0.5.0) 把SASS编译成CSS

14. grunt-contrib-stylus (v0.8.0) 把Stylus文件编译成CSS

15. grunt-contrib-uglify (v0.2.4) 用UglifyJS方式压缩JS文件

uglify: {
    options: {
        //生成一个banner注释并插入到输出文件的顶部
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
    },
    dist: {
        files: {
	    // uglify会压缩concat任务中生成的文件,并生成到dist/目录下
            'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
    }
}

    压缩一个源文件以及使用该元数据动态的生成一个banner注释 
    pkg: grunt.file.readJSON('package.json'), // pkg是定义了一个非任务的属性，并且用readJSON读取文件数据
    uglify: {
        options: {
            banner: '/* <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        dist: {
            src: 'src/<%= pkg.name %>.js',
            dest: 'dist/<%= pkg.name %>.min.js'
        }
    }

uglify: {
            options: {
                mangle: true  // mingle
            },
            dist: {
                files: [
                    {
                        expand: true,     // Enable dynamic expansion.
                        cwd: '<%=yeoman.app %>/extensionModules',      // Src matches are relative to this path.
                        src: ['**/*.js'], // Actual pattern(s) to match.
                        dest: '<%=yeoman.dist %>/extensionModules',   // Destination path prefix.
                        ext: '.js'   // Dest filepaths will have this extension.
                    },
                    {
                        expand: true,     // Enable dynamic expansion.
                        cwd: '<%=yeoman.app %>/scripts',      // Src matches are relative to this path.
                        src: ['**/*.js'], // Actual pattern(s) to match.
                        dest: '<%=yeoman.dist %>/scripts',   // Destination path prefix.
                        ext: '.js'   // Dest filepaths will have this extension.
                    }
                ]
            }
        } // code compression

16. grunt-contrib-watch (v0.5.3) 实时监测文件的增删改状态，状态改变时自动执行预定义任务

watch: {
            coffee: {
                files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
                tasks: ['coffee:dist']
            },
            coffeeTest: {
                files: ['test/spec/{,*/}*.coffee'],
                tasks: ['coffee:test']
            },
            livereload: {
                options: {
                    livereload: LIVERELOAD_PORT
                },
                files: [
                    '<%= yeoman.app %>/{,*/}*.html',
                    '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
                    '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
                    '{.tmp,<%= yeoman.app %>}/modules/{,*/}*.js',
                    '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
                ]
            }
        },

17. grunt-contrib-yuidoc (v0.5.0) 编译YUIDoc文档

18. grunt-contrib-connect (v0.5.0) 启动一个web服务器连接

 // run a  webserver on local host.
        connect: {
            options: {
                port: 9000,
                // Change this to '0.0.0.0' to access the server from outside.
                hostname: 'localhost'
            },
            livereload: {
                options: {
                    middleware: function (connect) {
                        return [
                            lrSnippet,
                            mountFolder(connect, '.tmp'),
                            mountFolder(connect, yeomanConfig.app)
                        ];
                    }
                }
            },
            test: {
                options: {
                    middleware: function (connect) {
                        return [
                            mountFolder(connect, '.tmp'),
                            mountFolder(connect, 'test')
                        ];
                    }
                }
            },
            dist: {
                options: {
                    middleware: function (connect) {
                        return [
                            mountFolder(connect, yeomanConfig.dist)
                        ];
                    }
                }
            }
        },

19. grunt-contrib-jade (v0.8.0) 编译Jade模版

20. grunt-contrib-handlebars (v0.5.11) 预编译Handlebars模板到JST文件（Handlebars：结合json数据的模版）

21. grunt-contrib-jasmine (v0.5.2) 通过PhantomJS运行jasmine（PhantomJS：JS单元测试）

22. grunt-contrib-jst (v0.5.1) 预编译Underscore模板到JST文件（Underscore：JS工具库）

23. grunt-contrib-nodeunit (v0.2.1) 运行Nodeunit单元测试（NodeUnit：Node.js单元测试框架）

24. grunt-contrib-qunit (v0.3.0) 用PhantomJS对象运行QUnit单元测试

25. grunt-contrib-requirejs (v0.4.1) 用r.js优化RequireJS项目

'use strict';

var LIVERELOAD_PORT = 35729;
var lrSnippet = require('connect-livereload')({ port: LIVERELOAD_PORT });
var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
};

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

module.exports = function (grunt) {

    // load all grunt tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    // configurable paths
    var yeomanConfig = {
        app: 'app',
        dist: 'dist'
    };

    try {
        yeomanConfig.app = require('./bower.json').appPath || yeomanConfig.app;
    } catch (e) {
    }

    grunt.initConfig({
        yeoman: yeomanConfig,
               
        open: {
            server: {
                url: 'http://localhost:<%= connect.options.port %>'
            }
        },
        // not used since Uglify task does concat,
        // but still available if needed
        /*concat: {
         dist: {}
         },*/
        rev: {
            dist: {
                files: {
                    src: [
                        '<%= yeoman.dist %>/styles/{,*/}*.css',
                        '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
                        '<%= yeoman.dist %>/styles/fonts/*'
                    ]
                }
            }
        },
 
        concurrent: {
            server: [
                'coffee:dist'
            ],
            test: [
                'coffee'
            ],
            dist: [
                'coffee',
                'imagemin',
                'htmlmin'
            ]
        },
        karma: {
            unit: {
                configFile: 'karma.conf.js',
                singleRun: true
            }
        },
        cdnify: {
            dist: {
                html: ['<%= yeoman.dist %>/*.html']
            }
        },
        
    });

    grunt.registerTask('server', function (target) {
        if (target === 'dist') {
            return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
        }

        grunt.task.run([
            'clean:server',
            'concurrent:server',
            'connect:livereload',
            'open',
            'watch'
        ]);
    });

    grunt.registerTask('test', [
        'clean:server',
        'concurrent:test',
        'connect:test',
        'karma'
    ]);

    grunt.registerTask('build', [
        'clean:dist',
        'useminPrepare',
        'concurrent:dist',
        'concat',
        'copy',
        'cdnify',
        'cssmin',
        'uglify',
        'rev',
        'usemin'
    ]);

    grunt.registerTask('default', [
        //'jshint',
        'test',
        'build'
    ]);
};