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

深碍√TFBOYSˉ_ 2022-05-19 04:51 197阅读 0赞

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

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

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

大工告成。  
![这里写图片描述][70 1]

文件全部内容：

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

[Vue2_VueRouter3_Webpack3.6_Axios_-]: https://blog.csdn.net/weiyongliang_813/article/details/80983325
[70]: /images/20220519/e37daca5dd2e4c9ca9b327e5331199ad.png
[grunt]: https://blog.csdn.net/weiyongliang_813/article/details/76618697
[70 1]: /images/20220519/145384172df74979ac8437a13fa739df.png