我们的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.
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
将代码转化为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观看所有的更新以方便开发。所以这里我的思路是：
babel转码。` babel: {
options: {
sourceMap: false,
presets: [‘babel-preset-es2015’]复制代码1
2
3
4
5
6
7
8
9
10
11
12
13}, dist: { files: [{ expand:true, src:['app/js/**/*.js'], //所有js文件 dest:'build/' //输出到此目录下 }] } }, `
2.将转化为es5的代码concat/压缩/watch：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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进入主文件并启动项目:
复制代码
1
2
3
4
5
6
7
8
9
10
express: {
options: {
},
dev: {
options: {
script: 'main.js'
}
}
}最后
以上就是无聊酸奶最近收集整理的关于[grunt] grunt 配置babel es6转码的全部内容，更多相关[grunt]内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
![[grunt] grunt 配置babel es6转码](/uploads/reation/bcimg10.png)
发表评论 取消回复