Gulp workflow for validation and es 6

I'm new to Gulp and the concept of task runners. I am wanting to write some javascript using es6 and have gulp run it through jscs, jshint and finally use babel to convert it to es5.

The part I'm confused about is the order I should have these tasks in my gulp pipeline. If I run jshint first I get warnings about how I can't use let and arrow functions. However, if I convert my code using babel first the babel output then fails validation as well.

What I'm looking for is a correct way of ordering my gulp task so it validates and converts my code to es5.

This is my current gulp task.

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

});

Solution

First, if possible, consider moving to ESLint; I'm not saying that because it's a subjective opinion, I'm saying that because it's modular and supports ES6, and even React+JSX if that's where you want to go with it.

You aren't going to have a lot of luck with JSHint, yet, if ES6 is where you're going. If/when I'm wrong, please let me know, but I believe they have yet to replace their parser, to support all of ES6, and unless you're going to include the entirety of the browser polyfill+library in the pipeline (just for sake of having no missing methods, for validate to work), you may well be at a loss, here.

With ESLint in place, you could use the following config options (in .eslintrc, in the package.json, et cetera), to get ES6 support:

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

Of course, if you don't need node globals, JSX or ES6 modules, feel free to rip those out.

The one other caveat there is that ESLint has no support for ES7 (ES2016), yet (but will, when it's standardized). So array/generator comprehensions, async/await, trailing commas in function argument lists, et cetera, are not supported and will cause explosions.

There is a babel-eslint version of eslint which will validate these, if that's your requirement. You can put that in place by installing "babel-eslint" and then in your eslint config, setting { "parser": "babel-eslint" } to the root object, along with all of your other config preferences.

But typically, you would lint the code that you are putting into the system, pre-compile, using ESLint and Babel:

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