Yeoman fail with gulp in babel (es2015)

Question

I created a yeoman generator and when I start using babel e.g. change the gulpefile.js to gulpfile.babel.js (and add a .babelrc file) the outside gulpfile.js (not the project gulpfile.babel.js) start fail.

The project generated with the gulpfile.babel.js works. And I manage to pin point the failed gulp task to gulp pre-test.

This is my yeoman generator tree:

.
├── README.md
├── generators
│   └── app
│       ├── index.js
│       └── templates
│           └── my-awesome-site
│               ├── Gemfile
│               ├── README.md
│               ├── _config.yml
│               ├── _includes
│               │   ├── footer.html
│               │   ├── head.html
│               │   └── header.html
│               ├── _layouts
│               │   ├── default.html
│               │   ├── page.html
│               │   └── post.html
│               ├── _posts
│               │   └── 2016-09-08-welcome-to-jekyll.markdown
│               ├── about.md
│               ├── feed.xml
│               ├── gulpfile.babel.js
│               ├── images
│               │   └── touch
│               │       ├── apple-touch-icon.png
│               │       ├── chrome-touch-icon-192x192.png
│               │       ├── icon-128x128.png
│               │       └── ms-touch-icon-144x144-precomposed.png
│               ├── index.html
│               ├── package.json
│               ├── robots.txt
│               ├── scss
│               │   ├── _base.scss
│               │   ├── _layout.scss
│               │   ├── _syntax-highlighting.scss
│               │   └── main.scss
│               └── travis
├── gulpfile.js
├── package.json
└── test
    └── app.js

I managed to pinpoint the failed gulp task gulp pre-test:

gulp.task('pre-test', function () {
  return gulp.src('generators/**/*.js')
    .pipe(excludeGitignore())
    .pipe(istanbul({
      includeUntested: true
    }))
    .pipe(istanbul.hookRequire());
});

The error message:

[10:26:27] Using gulpfile ~/WebstormProjects/generator-jekyll-starter-kit/gulpfile.js
[10:26:27] Starting 'pre-test'...
Failed to parse file: /Users/nirgalon/WebstormProjects/generator-jekyll-starter-kit/generators/app/templates/my-awesome-site/gulpfile.babel.js

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: Unable to parse /Users/nirgalon/WebstormProjects/generator-jekyll-starter-kit/generators/app/templates/my-awesome-site/gulpfile.babel.js

Line 3: Unexpected token

The gulpfile.babel.js around line 3:

'use strict';

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import runSequence from 'run-sequence';
import browserSync from 'browser-sync';

const $ = gulpLoadPlugins();

// Minify the HTML.
gulp.task('minify-html', () => {
  return gulp.src('_site/**/*.html')
    .pipe($.htmlmin({
      removeComments: true,
      collapseWhitespace: true,
      collapseBooleanAttributes: true,
      removeAttributeQuotes: true,
      removeRedundantAttributes: true,
      removeEmptyAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
      removeOptionalTags: true
    }))
    .pipe(gulp.dest('_site'))
});

I try figure it out, with no success (I thought it has something to do with babel, and tried to install babel in the project root package.json).

Answer 1

I manage to find the answer. It was gulp-eslint, he doesn't recognize the ES2015 syntax. When I added the code below to eslint gulp task the tests run fine.

{
  ecmaFeatures: {
    modules: true
  },
  envs: [
    'browser', 'es6'
  ],
  parserOptions: {
    sourceType: 'module'
  }
}

The whole task:

gulp.task('static', function () {
  return gulp.src('**/*.js')
    .pipe(excludeGitignore())
    .pipe(eslint({
      ecmaFeatures: {
        modules: true
      },
      envs: [
        'browser', 'es6'
      ],
      parserOptions: {
        sourceType: 'module'
      }
    }))
    .pipe(eslint.format())
    .pipe(eslint.failAfterError());
});