Yeoman 在 babel (es2015) 中因 gulp 失败

Question

我创建了一个 yeoman 生成器，当我开始使用 babel 例如将 gulpefile.js 更改为 gulpfile.babel.js（并添加 .babelrc 文件）外部 gulpfile.js（不是项目 gulpfile.babel.js）启动失败。

用 gulpfile.babel.js 生成的项目有效。我设法将失败的 gulp 任务指向 gulp pre-test.

这是我的 yeoman 生成器树：

.
├── 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

我设法查明失败的 gulp 任务 gulp pre-test:

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

错误信息：

[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

第3行附近的gulpfile.babel.js：

'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'))
});

我试了一下，没成功（我以为是babel的问题，试过把babel安装到项目根目录下package.json）

Answer 1

您在 gulpfile 中使用了 es2015。有没有可能你的 Node 版本不支持它？

Answer 2

我设法找到了答案。是 gulp-eslint，他不认识 ES2015 语法。当我将下面的代码添加到 eslint gulp 任务时，测试运行很好。

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

整个任务：

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());
});

Yeoman 在 babel (es2015) 中因 gulp 失败

Yeoman fail with gulp in babel (es2015)

yeoman

ecmascript-6

yeoman-generator

gulp

babeljs