Integrate ES6 / Babel Into Pipeline

Hi,

Has anyone had success integrating gulp-babel into the pipeline? I installed it via NPM and updated my gulpfile.js below, but I"m getting an error when I “gulp”

var jsTasks = function(filename) {
  return lazypipe()
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.init());
    })
    .pipe(function() {
      return $.if(
        project.js.map(function(curr) {
          return require('path').resolve(curr);
        }),
        $.babel()
      );
    })
    .pipe(concat, filename)    
    .pipe(uglify)
    .pipe(function() {
      return gulpif(enabled.rev, rev());
    })
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.write('.'));
    })();
};

Thanks,
Jason

Well what’s the error?

I’m very beginner with Gulp, but I somehow got it to work with the following modification:

var jsTasks = function(filename) {
  return lazypipe()
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.init());
    })
    .pipe(function() {
      return gulpif(filename === "main.js", babel({
        filename: filename,
        presets: ['es2015']
      }));
    })
    .pipe(concat, filename)
    .pipe(uglify, {
      compress: {
        'drop_debugger': enabled.stripJSDebug
      }
    })
    .pipe(function() {
      return gulpif(enabled.rev, rev());
    })
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.write('.', {
        sourceRoot: 'assets/scripts/'
      }));
    })();
};

I really felt “I don’t really know that I’m doing” with this code, so I wouldn’t be surprised if it has issues.

1 Like

Yup, there is an issue in your code:
You are running babel when filename is main.js, it represents the concatened
file dist/scripts/main.js.
If you didn’ t change it in your manifest.json, you have all your bower dependencies concatened in this file. And surely you don’ t want to run babel on your dependencies.

I posted a solution there: