Grunt / Babel error: Unable to write "dist" file (Error code: EISDIR)

Question

I am new to Grunt and all its plugins, but I want to learn and setup some awesome front-end tools. With that said, I have been following the Grunt docs and some's similar issue with Grunt and Babel via Github, but I seem to keep getting the following traceback:

Running "babel:dist" (babel) task
Warning: Unable to write "dist" file (Error code: EISDIR). Use --force to continue.

Aborted due to warnings.

Any clearer explanation to this newbie would be HIGHLY appreciated. I'm new to programming in JS and setting up DevOps, so some helpful tips and best practices are encouraged.

---

Setup:

js_practice/ (Root Project)
|----package.json

All the distributions and packages
|---node_modules/

Server-Side (Node) support
|---es6/
| ------ test.js
|---dist/

Client (browser) support
|----public/
|---es6/ (this is within the public folder)
| ----- test2.js
|---dist/ (this is within the public folder)

Here is my current code:

Grunt file.js

module.exports = function(grunt) {
        // All of your Grunt code must be specified inside this function!
        // Setup configuration...
    // Load tasks...
    // Define tasks...

    grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),
            babel: {
                     options: {
                             sourceMap: true,
                             presets: ['babel-preset-es2015']
                     },
                     dist: {
                             files: [
                                 // Node source
                                 {
                                 src: ['es6/**/*.js'],
                                 dest: 'dist'},
                                 // Browser source
                                {
                                    src: ['public/es6/**/*.js'],
                                    dest: 'public/dist'},
                        ],
                    },
             },

            browserify: {
           dist: {
             options: {
               transform: [["babelify", { "stage": 0 }]]
             },
             files: {
               "build/bundle.js": "src/main.js"
             }
           }
             },

        jshint: {
            scripts: {
                src: ['scripts/**.js', 'lib/**.js']
            },

            tests: { // We can have more than one jshint task, this ones called `jshint:tests`
                src: 'tests/**.js'
            }
        },

                uglify: {
              options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
              },
              build: {
                src: 'src/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
              },
            scripts: {
                expand: true,
                cwd: 'scripts/',
                src: '**.js',
                dest: 'build/',
                ext: '.min.js'
            }
        },

        watch: {
                    scripts: {
                    files: ['**/*.js'],
                    tasks: ['jshint'],
                        },

            styles: {
                files: 'styles/**.less',
                task: 'less:styles'
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-browserify');
    grunt.loadNpmTasks('grunt-babel');

    grunt.registerTask('default', ['babel','browserify','jshint']);
    grunt.registerTask('build', ['jshint', 'uglify']);

};

Answer 1

Just expanding on what I said in the comments

Any clearer explanation to this newbie would be HIGHLY appreciated.

Nodejs is trying to write a file called dist, but produces an error because a directory with this name exists.

The cause of this is found in the babel task.

  files: [{
      src: ['es6/**/*.js'],
      dest: 'dist'
    },
    // Browser source
    {
      src: ['public/es6/**/*.js'],
      dest: 'public/dist'
    }]

You have to tell Babel to take each file in es6/, transform them and place the new files in the dist/ folder. As it stand now, the transformer tries to create a file called dist. Rewriting it to

  files: [{
      expand: true,
      cwd: 'es6/'
      src: ['**/*.js'],
      dest: 'dist/'
    },
    // Browser source
    {
      expand: true,
      cwd: 'public/es6/'
      src: ['**/*.js'],
      dest: 'public/dist/'
    }]

should yield a better result, but play around with it. Like I mentioned, I haven't used Grunt in a while. Take a look at the documentation on building the files object

And like I said in the comments, use jshint or other such tools (eslint is all the hype...) to keep your own code neat. Don't waste time by running a jshint task on lib files that you probably don't want to fix yourself anyway. And always run jshint on the source files, not files that are transformed by babel or browserify. It's just a tool to help you write better code, not some generator.