Grunt Babel Takes 6 Seconds Per File

Question

I am trying to use Babel in my grunt build process to transfer my .js project files from ES6 to ES5. I have a watch task that scans my .js directory for changes and when the changes are detected, I run the babel task.

For some reason, however, changing only one .js file takes 6 to 10 seconds. I have a feeling that this is a broadcast of the whole project, but I'm not sure. My Gruntfile.js as follows:

 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"]); }); 

When I run grunt serve and change the file, it logs the runtime:

Starting the babel: dist job (babel)

Finish without error.

Lead time (2015-12-01 11:57:54 UTC) babel: dist 6.7s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ ▇▇▇▇▇ 100% Only 6.7s

But when I use babel-cli in my terminal, it translates in milliseconds, almost instantly even:

 babel --presets es2015 script.js --out-file transpiled.js 

Of course, this is too long. I'm something wrong here.

Any help is appreciated. Thanks in advance!

Answer 1

During the development process, you may decide to launch the JS version of the Babel kernel directly in the browser, which is pretty fast.

Then, for deployment, you can create a specific Grunt build task that removes Babel-Core from HTML and instead transfers files using the Grunt Babel plugin.

Your Grunt file will have something like this:

 grunt.registerTask('build', ['processhtml', 'babel']); grunt.registerTask('default', [''watch']); 

To remove Babel-core JS, you can use plugins like grunt-processhtml: http://www.npmjs.com/package/grunt-processhtml . HTML will look like this:

 <!-- 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 can be found here: http://cdnjs.com/libraries/babel-core . You can download it and add it to your project, or just run it from the CDN directly.