我正在尝试在我的grunt构建过程中使用Babel将我的.js
项目文件从ES6转换为ES5。我有一个watch
任务在我的.js
目录中查看更改,当检测到更改时,我运行babel
任务。
出于某种原因,只更改一个.js
文件需要6到10秒才能完成。我感觉它正在整个项目的转变,但我不确定。我的Gruntfile.js
看起来像这样:
grunt.initConfig({
watch: {
babel: {
files: ["<%= yeoman.app %>/scripts/**/*.js"],
tasks: ["babel"]
},
livereload: {
options: {
livereload: LIVERELOAD_PORT
},
files: [
"{.tmp,<%= yeoman.app %>}/scripts/**/*.js",
]
}
},
babel: {
options: {
sourceMap: true,
presets: ['es2015']
},
dist: {
files: [
{
expand: true,
cwd: '<%= yeoman.app %>/scripts/',
src: ['**/*.js'],
dest: '.tmp/scripts/'
}
]
}
}
});
grunt.registerTask("serve", function(target) {
return grunt.task.run(["watch"]);
});
当我运行grunt serve
并更改文件时,它会记录执行时间:
运行“babel:dist”(babel)任务
完成,没有错误。
执行时间(2015-12-01 11:57:54 UTC) babel:dist 6.7s▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇100% 总计6.7s
但是当我在终端中使用babel-cli
时,它会在几毫秒内完成,甚至几乎是瞬间完成:
babel --presets es2015 script.js --out-file transpiled.js
这肯定太长了。我在这里做错了吗。
感谢任何帮助。提前谢谢!
答案 0 :(得分:0)
在开发过程中,您可以决定直接在浏览器中运行Babel-core的JS版本,该版本运行得非常快。
然后,对于部署,您可以创建一个特定的Grunt构建任务,从HTML中删除Babel-Core,然后使用Grunt Babel插件转换文件。
您的Gruntfile将具有以下内容:
grunt.registerTask('build', ['processhtml', 'babel']);
grunt.registerTask('default', [''watch']);
要删除Babel-core JS,您可以使用像grunt-processhtml:http://www.npmjs.com/package/grunt-processhtml这样的插件。 HTML将如下所示:
<!-- build:remove -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<!-- /build -->
JS Babel-core可以在这里找到:http://cdnjs.com/libraries/babel-core。您可以下载它并将其添加到您的项目中,或直接从CDN运行它。