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

};