可能有人会疑问,既然都用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']);
}