Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
369 views
in Technique[技术] by (71.8m points)

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中肯定压缩不报错,怎么解?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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这个中间目录给清了(这个我没写)~


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...