[grunt] grunt 配置babel es6转码

我们的project是test-web.
安装

Step 1: 进入根目录路径

cd test-web

Step 2: 安装 grunt

npm install –save-dev grunt

Step 3: 安装 load-grunt-tasks

npm install –save-dev load-grunt-tasks

Step 4: 安装 grunt-babel

npm install –save-dev grunt-babel

Step 5: 最后, 启动

grunt

输出结果应该是:

Running “babel:dist” (babel) task

Done, without errors.

将代码转化为es6. 你的 gruntfile.js 应该是这样的:module.exports = function (grunt){    require("load-grunt-tasks")(grunt); // npm install --save-dev load-grunt-tasks    grunt.initConfig({        "babel": {            options: {                sourceMap: true,                presets: ['es2015']            },            dist: {                files: {                    "dist/app.js": "src/app.js"                }            }        }    });    grunt.registerTask("default", ["babel"]);};

在angularjs+express项目中，用grunt来将所有的前端js文件concat,压缩，watch观看所有的更新以方便开发。所以这里我的思路是：

1. babel转码。` babel: {
   options: {
   sourceMap: false,
   presets: [‘babel-preset-es2015’]

          },       dist: {           files: [{              expand:true,              src:['app/js/**/*.js'], //所有js文件              dest:'build/'  //输出到此目录下            }]       }   },   `

2.将转化为es5的代码concat/压缩/watch：

concat: {            options: {                //separator: ';'            },            allInOne: { //所有JS文件全部合并成一份文件                src: ['build/**/*.js'],//这时经过转码之后的js文件                dest: 'app/javascript/<%= pkg.name %>.js'            }        },        uglify: {            options: {                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'            },            dist: {              files: {                'app/javascript/<%=pkg.name %>.min.js': ['<%= concat.allInOne.dest %>']              }            }        },        watch: {            javascript: {                files: ['app/js/**/*.js'],                tasks: ['babel:dist','concat:allInOne', 'uglify:dist'],//这里是每次js文件有改动的时候，grunt会自动做的工作，即转码，concat,压缩                options: {                   livereload:true,                    interrupt: true                },           babel:{              files:'build/js/**/*.js',              tasks:['babel']              }            },            express: {              files: ['main.js'],              options: {                spawn: false              }            }        }

3.通过express进入主文件并启动项目:

 express: {          options: {          },          dev: {            options: {              script: 'main.js'            }          }        }