grunt中使用babel与uglify产生的问题

问题描述

问 题

使用grunt中的babel把ES6转成ES5，同时把所有的js都压缩一下，Gruntfile.js的配置如下：

module.exports = function(grunt) {  
  //配置参数  
grunt.initConfig({  
    pkg: grunt.file.readJSON('package.json'), 
    
    watch: {
       js: {
        files:['src/**/*.js'],
        tasks:['default'],
        options: {livereload:false}
      },
      babel:{
          files:'src/**/*.js',
          tasks:['babel']
      }
    },

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

    
    uglify: {  
        options: {
         mangle: true, //混淆变量名
         comments: 'false' //false（删除全部注释），some（保留@preserve @license @cc_on等注释）
        },  
        my_target: {
             files: [{
               expand:true,
               cwd:'src/', //js目录下
               src:['**/*.js'], //所有js文件
               dest:'dist/'  //输出到此目录下
             }] 
        } 
    }
});  
  
  //载入uglify插件，压缩js 
  grunt.loadNpmTasks('grunt-babel');
  grunt.loadNpmTasks('grunt-contrib-uglify'); 
  grunt.loadNpmTasks('grunt-contrib-watch');
  //注册任务  
  grunt.registerTask('default', ['babel']);
  grunt.registerTask('default', ['uglify']);
  grunt.registerTask('watcher',['watch']);
} 

意图就是，先把vuedraggable.js转成ES5，然后压缩所有的js到dist目录下。
但是报错如下所示：

SyntaxError: Unexpected token: operator `(>)`.

就是ES6语法=>报错,但是压缩的文件已经转换了这个js，压缩的时候还是报这个错误，如果把转换的ES5的vuedraggable.js直接放到原始目录src中肯定压缩不报错，怎么解？

解决方案

update: 如果是还有其他不需要babel处理的js，我觉得uglify可以做两个task，一个是针对es5的uglify，而一个是针对es6的，es6的那个参考我原来写的这样子，修改了一下，给uglify加多了个allother的task，针对所有js除了t.js……

我的想法是，既然是要先babel转化js，再通过uglify处理这一部分js，一来，这两者应该有顺序依赖关系，二来uglify只能针对babel产出的js，简单的可以考虑babel产出到babel目录，然后uglify针对babel目录的js做压缩处理。

配置如下：

module.exports = function(grunt) {  
  //配置参数  
grunt.initConfig({  
   // pkg: grunt.file.readJSON('package.json'), 
    
    watch: {
       js: {
        files:['src/**/*.js'],
        tasks:['default'],
        options: {livereload:false}
      },
      babel:{
          files:'src/**/*.js',
          tasks:['babel']
      }
    },

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

    
    uglify: {  
        options: {
         mangle: true, //混淆变量名
         comments: 'false' //false（删除全部注释），some（保留@preserve @license @cc_on等注释）
        },  
        my_target: {
             files: [{
               expand:true,
               cwd:'babel', //js目录下
               src:['**/*.js'], //所有js文件
               dest:'dist/'  //输出到此目录下
             }] 
        },
        allother:{
          files: [{
               expand:true,
               cwd:'src/', //js目录下
               src:['**/*.js','!t.js'], //所有js文件
               dest:'dist/'  //输出到此目录下
             }] 
        }
    }
});  
  
  //载入uglify插件，压缩js 
  grunt.loadNpmTasks('grunt-babel');
  grunt.loadNpmTasks('grunt-contrib-uglify'); 
  //grunt.loadNpmTasks('grunt-contrib-watch');
  //注册任务  
  grunt.registerTask('default', ['babel','uglify']);
  //grunt.registerTask('default', ['uglify']);
 // grunt.registerTask('watcher',['watch']);
} 


} 

这样就正常了。 最后再写个任务把babel这个中间目录给清了（这个我没写）~

这篇关于grunt中使用babel与uglify产生的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！