CODEWITHSUNDEEP
javascriptnode.jsnpmgruntjsgrunt-babel
Downgoat
Downgoat

Reputation: 14361

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.

Upvotes: 4

Views: 1005

Answers (2)

aleksblago
aleksblago

Reputation: 323

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.

Upvotes: 3

Jason Livesay
Jason Livesay

Reputation: 6377

Try a more literal example from the README like:

grunt.initConfig({
    babel: {
        options: {
            sourceMap: true,
            presets: ['es2015']
        },
        dist: {
            files: {
                'dist/myfile.js': 'src/myfile.es6'
            }
        }
    } });

After you get that working try specifying *.es6 etc. under files. If you look at the source for the grunt-babel plugin it may be more limited than one would assume.

You can also just use npm scripts and specify the babel command line directly which I feel is simpler than using grunt.

Upvotes: 0

Related Questions