[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'
}
}
}

最后

以上就是无聊酸奶为你收集整理的[grunt] grunt 配置babel es6转码的全部内容，希望文章能够帮你解决[grunt] grunt 配置babel es6转码所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。