Search code examples
javascriptnode.jsnpmgruntjsgrunt-babel

Grunt + Babel successfully runs but doesn't do anything


I'm rather new to grunt/npm but after reading up the docs. I have made myself a package.json and a Gruntfile.js. Here's my folder structure:

/
|- src
    |- myfile.es6
    |- anotherfile.es6
    |- etc.
|- Gruntfile.js
|- package.json

What I have

Here's my Gruntfile:

module.exports = function(grunt) {
    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        babel: {
            options: {
                sourceMap: true,
                plugins: ['es2015']
            },
            dist: {
                files: [{
                    expand: true,
                    cwd: 'src/',
                    src: ['*.es6'],
                    dest: 'dist/',
                    ext: '.js'
                }]
            }
        }
    });

    grunt.registerTask('default', ['babel'])
};

And then here's my package.json:

{
  "name": "Cheddar",
  "version": "0.2.0",
  "devDependencies": {
    "babel-preset-es2015": "^6.6.0",
    "grunt": "^1.0.1",
    "grunt-babel": "^6.0.0"
  },
  "scripts": {
    "test": "grunt --verbose"
  }
}

What does it do?

I have my src/ folder which contains my source files (*.es6). I want to transpile these to a dist/ directory with grunt.

What I've tried

Then I installed all the dependencies / babel-cli / grunt-cli/ etc. with npm install and npm-update --save

Seems good, so I went ahead and ran grunt:

$ grunt
Running "babel:dist" (babel) task

Done.
$ ls
Gruntfile.js  node_modules/  package.json  src/

The ls is outputting the exact same thing as before I ran grunt. So nothing is appearing to happen. Where's my output dist? This has been bugging me for the past few hours. I've tried installing babelify, and quite a few other fixes from blogs across the internet but alas, nothing works.


Solution

  • Try using the keyword "presets" instead of "plugins":

    babel: {
      options: {
          sourceMap: true,
          presets: ['es2015']
      }
      ...
    }
    

    When I use your configuration, grunt seems to error out because it can't find the plugin called "es2015". Everything worked after I made that change.