用于验证和 es 6 的 Gulp 工作流程答案

【问题标题】：Gulp workflow for validation and es 6用于验证和 es 6 的 Gulp 工作流程
【发布时间】：2015-08-24 13:51:28
【问题描述】：

我是 Gulp 和任务运行器概念的新手。我想使用 es6 编写一些 javascript，并让 gulp 通过 jscs、jshint 运行它，最后使用 babel 将其转换为 es5。

我感到困惑的部分是我应该在我的 gulp 管道中执行这些任务的顺序。如果我先运行 jshint，我会收到有关我无法使用 let 和箭头函数的警告。但是，如果我首先使用 babel 转换我的代码，那么 babel 输出也会失败验证。

我正在寻找一种正确的方式来订购我的 gulp 任务，以便它验证我的代码并将其转换为 es5。

这是我当前的 gulp 任务。

gulp.task('js-validation', function() {
$.util.log('**Starting js validation**');

return gulp
    .src(config.alljs)
    .pipe($.print())
    .pipe($.jshint())
    .pipe($.jscs())
    .pipe($.babel())
    .pipe($.jshint.reporter('jshint-stylish', {verbose: true}))
    .pipe($.jshint.reporter('fail'))
    .pipe(gulp.dest(config.temp));

});

【问题讨论】：

标签： javascript gulp jshint babeljs

【解决方案1】：

这对我有用：

.pipe(jshint({
        esnext: true
    }))

【讨论】：

在给出代码答案时，尝试解释应该使用什么/为什么要使用它。由于有许多可用的工具，答案应该可以帮助其他用户理解问题，并指导他们如何解决问题。

【解决方案2】：

首先，如果可能，考虑迁移到 ESLint；我不是因为这是一个主观意见，而是因为它是模块化的并且支持 ES6，如果你想用它，甚至支持 React+JSX。

如果 ES6 是你要去的地方，那么你不会对 JSHint 有很大的好运。如果/当我错了，请告诉我，但我相信他们还没有更换他们的解析器，以支持所有 ES6，除非你打算在管道中包含整个浏览器 polyfill+库（只是为了没有丢失的方法，为了验证工作），你可能会不知所措，在这里。

使用 ESLint，您可以使用以下配置选项（在 .eslintrc、package.json 等中）来获得 ES6 支持：

{
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "ecmaFeatures": {
    "modules": true,
    "jsx": true
  }
}

当然，如果您不需要节点全局变量、JSX 或 ES6 模块，请随意删除它们。

另一个需要注意的是，ESLint 尚不支持 ES7（ES2016）（但在标准化时会支持）。因此，不支持数组/生成器推导、异步/等待、函数参数列表中的尾随逗号等，并且会导致爆炸。

如果这是您的要求，有一个 babel-eslint 版本的 eslint 可以验证这些。您可以通过安装“babel-eslint”然后在您的 eslint 配置中将其设置到位，将 { "parser": "babel-eslint" } 设置为根对象，以及所有其他配置首选项。

但通常情况下，您会使用 ESLint 和 Babel 对要放入系统的代码进行 lint、预编译：

// ...
.pipe( eslint() )
.pipe( babel() )
// ...

【讨论】：

感谢您的建议。很好地总结了我需要看的地方。 :-)

【解决方案3】：

要对源代码（而不是编译后的代码）进行 lint，您必须在 babel 之前调用 linter，因此顺序正确。

但是，您必须使用真正理解 ES6 的 linter。使用 JSHint，您必须设置 esnext option，但我不确定它是否支持所有 ES6 功能。我建议用babel-eslint 来查看eslint。

【讨论】：

【解决方案4】：

您可以使用 ESLint 代替 JSHint，它将支持众多 ES6 函数：

http://eslint.org/docs/user-guide/configuring

您希望您的 linting 也发生在转译之前是正确的。

【讨论】：

【解决方案5】：

gulp.task('jshint', function () {
    gulp.src('js/**/*.js')
    .pipe(cache('jshint'))
    .pipe(jshint({esnext:true}))
    .pipe(jshint.reporter('default'));
});

.pipe(jshint({esnext:true}))

【讨论】：

【解决方案6】：

您的顺序正确，但正如其他答案所建议的那样，使用 ESLint。您还应该有一个函数来处理 linting 时的错误。这是我的 gulpfile.js（不是一个完美的例子，但它对我有用）：

const gulp = require("gulp"),
    babel = require("gulp-babel"),
    eslint = require("gulp-eslint");

gulp.task("babel", () => {
    gulp.src("src/*.js")
        .pipe(eslint())
        .pipe(eslint.format())
        .pipe(eslint.failAfterError())
        .on("error", onError) // handle error for eslint
        .pipe(babel())
        .on("error", onError) // handle error for babel
        .pipe(gulp.dest("dist"));
});

gulp.task("watch", () => {
    process.chdir(process.env.INIT_CWD);
    gulp.watch("src/*.js", ["babel"]);
});

// ignore if error is from babel, eslint error message is enough
if (err.plugin != "gulp-babel" && err.message) {
  console.log("Message: ", err.message);
}

【讨论】：