Vue2+VueRouter3+Webpack3.6+Axios项目实战----Grunt在项目中的使用（十二）

可能有人会疑问，既然都用webpack了怎么还需要用grunt呢。
先介绍下使用背景：
Vue2+VueRouter3+Webpack3.6+Axios项目实战—-定义全局工具类（六）
这篇博客里面讲到了注册全局工具类，但这种方式也不方便，因为这些工具类每个界面都在使用，不可能在业务界面每次都取引入。
为了一劳永逸的解决该问题，打算把这些文件压缩成一个文件，在index.html中直接引入，这样就不需要每次使用时去导入相应的工具类。

但这样做问题就来了，因为这些文件没有在项目使用中导入，webpack不会去打包编译，而这些文件又是es6编写的，所以就需要grunt来实现
编译==》合并==》压缩

grunt的安装这里不讲了，不了解的可以查看我以前写的博客
grunt的安装

第一步：配置编译 es6转es5

babel: {
      options: {
        sourceMap: false,
        presets: ['babel-preset-env'],
        babelrc: true
      },
      dist: {
        files: [ 
          {
            expand: true,
            cwd: 'src/assets/utils/source', //js目录下
            src: ['**/*.js'], //所有js文件
            dest: 'src/assets/utils/dist'  //输出到此目录下
          }, 
        ]
      }
    }

第二步：配置合并

 concat: { 
      utils: {
        src: ["src/assets/utils/dist/*.js","src/assets/i18n/dist/*.js"],
        dest: 'static/plugin/utils.js',
      },
    },

第三步：配置压缩

 uglify: {
      // 这里是uglify任务的配置信息
      options: {
        mangle: true,
        comments: 'false',
        banner: '/*!create by yaopan <%= grunt.template.today("yyyy-mm-dd")%>*/\n'
      },
      static_mappings: {
        files: [ 
          {
            src: 'static/plugin/utils.js',
            dest: 'static/plugin/utils.min.js'
          }
        ],
      }
    },

第四步：注册任务

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-babel');
  //注册任务
  grunt.registerTask('default', ['babel','concat','uglify']);

第五步： 则就是执行命令

grunt 

大工告成。

文件全部内容：

module.exports = function (grunt) {
  //配置参数
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    //文件压缩
    uglify: {
      // 这里是uglify任务的配置信息
      options: {
        mangle: true,
        comments: 'false',
        banner: '/*!create by yaopan <%= grunt.template.today("yyyy-mm-dd")%>*/\n'
      },
      static_mappings: {
        files: [
          {
          src: 'static/dx/dxExtend.js',
          dest: 'static/dx/dxExtend.min.js'
        },
          {
            src: 'static/plugin/plugin.js',
            dest: 'static/plugin/plugin.min.js'
          },
          {
            src: 'static/plugin/utils.js',
            dest: 'static/plugin/utils.min.js'
          }
        ],
      }
    },
    //文件合并
    concat: {
      // common: {
      //   src: ["static/plugin/polyfill.min.js","static/plugin/jquery.js","static/plugin/axios.min.js","static/plugin/toastr.min.js"],
      //   dest: 'static/plugin/common.min.js',
      // },
      basic: {
        src: ["src/assets/dxExtend/dist/*.js"],
        dest: 'static/dx/dxExtend.js',
      },
      extras: {
        src: ["src/assets/plugins/dist/*.js"],
        dest: 'static/plugin/plugin.js',
      },
      utils: {
        src: ["src/assets/utils/dist/*.js","src/assets/i18n/dist/*.js"],
        dest: 'static/plugin/utils.js',
      },
    },
    babel: {
      options: {
        sourceMap: false,
        presets: ['babel-preset-env'],
        babelrc: true
      },
      dist: {
        files: [{
          expand: true,
          cwd: 'src/assets/plugins/source', //js目录下
          src: ['**/*.js'], //所有js文件
          dest: 'src/assets/plugins/dist'  //输出到此目录下
        },
          {
            expand: true,
            cwd: 'src/assets/utils/source', //js目录下
            src: ['**/*.js'], //所有js文件
            dest: 'src/assets/utils/dist'  //输出到此目录下
          },
          {
            expand: true,
            cwd: 'src/assets/dxExtend/dxInitUtils', //js目录下
            src: ['**/*.js'], //所有js文件
            dest: 'src/assets/dxExtend/dist'  //输出到此目录下
          },
          {
            expand: true,
            cwd: 'src/assets/dxExtend/source', //js目录下
            src: ['**/*.js'], //所有js文件
            dest: 'src/assets/dxExtend/dist'  //输出到此目录下
          },
          {
            expand: true,
            cwd: 'src/assets/i18n/source', //js目录下
            src: ['**/*.js'], //所有js文件
            dest: 'src/assets/i18n/dist'  //输出到此目录下
          }
        ]
      }
    },
  });

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-babel');
  //注册任务
  grunt.registerTask('default', ['babel','concat','uglify']);
}