How use Babel with Grunt

1

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

grunt -v give me:

Initializing
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.


Gruntfile.js

Gruntfile.js

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

  grunt.initConfig({  
    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']);  
};
2

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.

3

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

4

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

–>Gulpfile.js

'use strict';

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

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

function doBabel() {
  gulp.src('es6practice.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'));
}	

gulp.task('watch', watch);

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

–>Package.json
{
“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:

5

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

Edit: Please indent your code.

6

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
7

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…

8

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

9

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

Insatallation in your Terminal:
git clone https://github.com/xavierartot/pages-code
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.

10

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'
Message:
    /Applications/MAMP/htdocs/freecodecamp-lab/intermediate-algo-scripting/roman-numeral-converter/src/babel/script.js: Unexpected token (11:2)