grunt构建

 构建工具

        构建工具是对 JS、CSS、HTML、LESS、IMG 等资源文件进行合并压缩构建到最后实现自动化构建项目。
    最流行的三种自动化构建工具: Grunt, Gulp, webpack。
    简化项目构建，自动完成构建。

   

    grunt自动化构建工具，一个基于nodeJs的命令行工具；
    任务运行器, 有丰富的插件；
            常用功能:
                合并文件(js/css)
                压缩文件(js/css)
                语法检查(js)
                less/sass预编译处理

 链接地址：

        中文：http://www.gruntjs.net/(中文官网)
        教程：http://www.cnblogs.com/wangfupeng1988/p/4561993.html(教程)

项目结构：

        |- build
        |- src
            |- js
            |- css
        |- index.html
        |- Gruntfile.js
        |- package.json

 grunt配置文件流程：Gruntfile.js

1、初始化插件配置（初始化）
2、加载插件任务（加载）
3、注册构建任务（注册）

module.exports = function(grunt){

    grunt.initConfig({
            
    });

    grunt.loadNpmTasks('grunt-contrib-concat');

    grunt.registerTask('default', []);

};

 * 常用的插件:

        * grunt-contrib-clean——清除文件(打包处理生成的)
        * grunt-contrib-concat——合并多个文件的代码到一个文件中
        * grunt-contrib-uglify——压缩js文件
        * grunt-contrib-jshint——javascript语法错误检查；
        * grunt-contrib-cssmin——压缩/合并css文件
        * grunt-contrib-htmlmin——压缩html文件
        * grunt-contrib-imagemin——压缩图片文件(无损)
        * grunt-contrib-copy——复制文件、文件夹
        * grunt-contrib-watch——实时监控文件变化、调用相应的任务重新执行

 完整配置（Gruntfile.js）：

module.exports = function(grunt) {

    grunt.initConfig({

        concat: {

            options: {

                separator: ';',

            },

            dist: {

                src: ['src/js/*.js'],

                dest: 'dist/js/built.js',

            },

        },

        pkg: grunt.file.readJSON('package.json'),

        uglify: {

            options: {

                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +

                    '<%= grunt.template.today("yyyy-mm-dd") %> */'

            },

            target: {

                files: {

                    'dist/js/built.min.js': ['dist/js/built.js']

                }

            }

        },

        babel: {

            options: {

                sourceMap: true,

                presets: ['@babel/preset-env'] // '@babel/preset-env'

            },

            dist: {

                files: {

                    'dist/js/built.js': 'src/js/*.js'

                }

            }

        },

        jshint: {

            options: {

                jshintrc: '.jshintrc'

            },

            build: ['Gruntfile.js', 'src/js/*.js']

        },

        cssmin: {

            options: {

                shorthandCompacting: false,

                roundingPrecision: -1

            },

            build: {

                files: {

                    'dist/css/built.min.css': ['src/css/*.css']

                }

            }

        },

        watch: {

            scripts: {

                files: ['src/js/*.js', 'src/css/*.css'],

                tasks: ['concat', 'jshint', 'uglify', 'cssmin'],

                options: { spawn: false }

            }

        }

    });



    // js合并

    grunt.loadNpmTasks('grunt-contrib-concat');

    // js压缩

    grunt.loadNpmTasks('grunt-contrib-uglify');

    // babel es转换

    grunt.loadNpmTasks('grunt-babel');

    // 语法检查

    grunt.loadNpmTasks('grunt-contrib-jshint');

    // css合并压缩

    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // 监听

    grunt.loadNpmTasks('grunt-contrib-watch');



    // 注册构建任务

    grunt.registerTask('default', ['concat', 'uglify', 'babel', 'jshint', 'cssmin']);

    grunt.registerTask('myWatch', ['default', 'watch']);



};

.jshintrc jshint配置文件：

{
    "curly": true,
    "eqeqeq": true,
    "eqnull": true,
    "expr": true,
    "immed": true,
    "newcap": true,
    "noempty": true,
    "noarg": true,
    "regexp": true,
    "browser": true,
    "devel": true,
    "node": true,
    "boss": false,
    "esversion": 6,
    "undef": true,
    "asi": false,
    "predef": ["define", "BMap", "angular", "BMAP_STATUS_SUCCESS"]
}