How use Babel with Grunt

I have this warning:
warning: Task "babel" not found. Use --force to continue.

grunt -v give me:

Command-line options: --verbose

Reading "Gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.

Registering "grunt-contrib-sass" local Npm module tasks.
Reading /Applications/MAMP/htdocs/babel/node_modules/grunt-contrib-sass/package.json...OK
Parsing /Applications/MAMP/htdocs/babel/node_modules/grunt-contrib-sass/package.json...OK
Loading "sass.js" tasks...OK
+ sass

Registering "grunt-contrib-watch" local Npm module tasks.
Reading /Applications/MAMP/htdocs/babel/node_modules/grunt-contrib-watch/package.json...OK
Parsing /Applications/MAMP/htdocs/babel/node_modules/grunt-contrib-watch/package.json...OK
Loading "watch.js" tasks...OK
+ watch
Initializing config...OK
Loading "Gruntfile.js" tasks...OK
+ default

No tasks specified, running default tasks.
Running tasks: default

Running "default" task
Warning: Task "babel" not found. Use --force to continue.



'use strict';
module.exports = function(grunt){
  require("load-grunt-tasks")(grunt); // npm install --save-dev load-grunt-tasks

    sass: {
      dist: {
        files: {
          'dist/main.css': 'src/main.scss'
    babel: {
        options: {
            sourceMap: true
            //presets: ['es2015']
        dist: {
            files: {
              "dist/app.js": "src/app.js"
  grunt.registerTask("default", ['sass', 'babel']);  

I know your pain. While I did not use gruntjs to use Babel, I used the command line and it give me problems too. I feel that the Babel website don’t explain what you have to do clear enough. If it is not a must to use gruntjs and you don’t mind using the command line this Tutorial is the best tutorial I’ve found on Youtube. Also Firefox and Chrome can interpret over 90% of es2015.

It works well with webpack, and Gulp:
here my repo, I gave up Grunt for Gulp, more update…

i used gulp for trying out with babel and i am gonna share my code. Hope it helps.


'use strict';

var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('default',['watch'], doBabel);

function doBabel() {
            presets: ['es2015']

gulp.task('watch', watch);

function watch(){'*.js',['default']);

“name”: “es6”,
“version”: “1.0.0”,
“description”: “”,
“main”: “es6practice.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“babel-core”: “^6.14.0”,
“babel-preset-es2015”: “^6.14.0”,
“gulp”: “^3.9.1”,
“gulp-babel”: “^6.1.2”

Hope it helps :slight_smile:

When you have an error, gulp stop?
Mine repo is stop :frowning:

Edit: Please indent your code.

yes i have done it like that any error in the code it stops. I recheck for any mistakes and then start the gulp all over. How do you do ?

1 Like

I’m working on a solution, almost done.
in my repos I have a sourcemap and livereload.
I double check any code before to save.
I almost there
I don’t need he stop what’a hell with them…

yes it can be irritating at times, do share the solution after you have got it.

I add Browserfy works better and a sourcemap for Jade and js.

Insatallation in your Terminal:
git clone
cd pages-code
npm install
gulp watch

I did my last algoritm with Babel in es6 :slight_smile:

I have fire :imp: and power for coding…
Happy coding.

I fixed this issue:
the error don’t stop Gulp and we still have the issue exemple with a comma forgot line 2, colomn 11:

18:59:51] Plumber found unhandled error:
 SyntaxError in plugin 'gulp-babel'
    /Applications/MAMP/htdocs/freecodecamp-lab/intermediate-algo-scripting/roman-numeral-converter/src/babel/script.js: Unexpected token (11:2)