Grunt Gruntfile.js文件详解

Grunt Gruntfile.js文件详解
/**
 * 引入Grunt.js
 * 1.意义：一个Javascript Task Runner（Javascript任务运行器），其基于NodeJS，可用于自动化构建、测试、生成文档的项目管理工具
 *         Grunt.js并不是仅仅是构建工具，实际上他只是任务运行器，管理每个子任务的自动化运行，我们还能使用他做更多东西。
 *
 * 2.作用： 为了自动化
 *          对于前端项目，例如：
 *          为了明确模块分工，我们可能会将Javascript代码拆成很小很小的一个个js文件，但是我们知道，在最终页面上，我们知道过多的js文件会产生过多的Http Request，这不利于页面优化。所以我们可能希望可以合并这些js文件的工具。
 *          为了用户端请求的文件尽量小，我们希望我们的HTML、Javascript等文件能进行压缩。
 *          我们可能需要对源代码进行一些单元测试和回归测试。
 *          我们可能希望有工具能够通过源代码备注自动生成文档，免得手动再写文档。
 *          ……
 *          很明显，这一切都有各种各样的小工具能帮我们做到，但是我们希望最好能输入一个命令，打开一个程序，或者干脆每次修改文件保存后自动进行这一切事情。
 *          以前我们可能使用NodeJS自己写一个build程序，但是现在Grunt.js能够提供我们需要的一切。
 *
 * */


//3.Gruntfile.js文件用于定义任务，以及任务组的执行顺序等


//4.Gruntfile.js样板
/*********************
 说明：文件结构基于 HTML5Boilerplate:
 + index.html
 - css
 + main.css
 - js
 - vendor
 + main.js
 + img/
 ***************************/
/*global module:false*/
module.exports = function (grunt) {
    'use strict';
    grunt.initConfig({
        csslint: {
            /* 检查 CSS 语法 */
            src: ['css/**/*.css']
        },
        jshint: {
            /* 检查 js 语法 */
            all: ['Gruntfile.js', 'js/main.js', 'js/lib/*.js']
        },
        imagemin: {
            /* 压缩优化图片大小 */
            dist: {
                options: {
                    optimizationLevel: 3
                },
                files: [
                    {
                        expand: true,
                        cwd: 'img/',
                        src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
                        dest: 'img/' // 优化后的图片保存位置，默认覆盖
                    }
                ]
            }
        },
        concat: {
            /* 合并 CSS 文件 */
            css: {
                src: ['css/normalize.min.css', 'css/cssgrids-min.css', 'css/helper.css', 'css/main.css', '...'],
                /* 根据目录下文件情况配置 */
                dest: 'css/all.css'
            },
            js: {
                src: [''],
                /* 根据目录下文件情况配置 如果可以使用 require.js/LABjs 等配置更佳 */
                dest: 'js/all.js'
            }
        },
        cssmin: {
            /*压缩 CSS 文件为 .min.css */
            options: {
                keepSpecialComments: 0 /* 移除 CSS 文件中的所有注释 */
            },
            minify: {
                expand: true,
                cwd: 'css/',
                src: ['all.css'],
                dest: 'css/',
                ext: '.min.css'
            }
        },
        uglify: {
            /* 最小化、混淆、合并 JavaScript 文件 */
            target: {
                files: {
                    'js/all.min.js': ['js/all.js']
                }
            },
            minjs: { //最小化、混淆所有 js/ 目录下的 JavaScript 文件
                files: [{
                    expand: true,
                    cwd: 'js/',
                    src: ['**/*.js', '!**/*.min.js'],
                    dest: 'js/',
                    ext: '.min.js'
                }]
            }
        },
        watch: {
            /* 监控文件变化并执行相应任务 */
            img: {
                files: ['img/**/*.{png,jpg,jpeg}'],
                options: {
                    livereload: true
                }
            },
            css: {
                options: {
                    event: ['changed', 'added'],
                    livereload: true
                },
                files: ['css/**/*.css']
            },
            js: {
                options: {
                    livereload: true
                },
                files: ['js/**/*.js']
            },
            html: {
                options: {
                    livereload: true
                },
                files: ['*.html']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-csslint');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    // 定义默认任务
    grunt.registerTask('default', ['csslint', 'jshint', 'imagemin', 'cssmin', 'concat', 'uglify']);
    grunt.registerTask('css', ['concat:css', 'cssmin']);
    grunt.registerTask('dev', ['csslint', 'jshint']);
    grunt.registerTask('dest', ['imagemin', 'concat:css', 'cssmin', 'uglify:minjs']);
};