Using es6 version of main.js

Hi,

Would it be possible to easily use something like https://babeljs.io in the gulp pipline for Sage so that I could write ES6 and have it compiled to javascript and bundled as normal? I couldn’t figure out how to add it into the pipeline correctly.

Thanks,
Jason

Seems like you should be able to just integrate https://github.com/babel/gulp-babel into your project’s gulpfile

npm install --save-dev gulp-babel

Then add

.pipe($.babel)

Right here before the concat:

5 Likes

Thanks Austin. I tried something similiar (and then I tried this exactly), but it seems it interferes with the other third-party libraries that I have installed (only two, modernizr and underscore.js). Is there a way to pipe only files from a specific folder (my custom application code, i.e. main.js) through the pipe($.babel) line?

Excellent question.

.pipe(function() {
  return $.if(
    project.js.map(function(curr) {
      return require('path').resolve(curr);
    }),
    $.babel()
  );
})

The above will only run $.babel on files inside the project.js array.

project.js comes from JSDoc: Class: Manifest getProjectGlobs() and is defined at
https://github.com/roots/sage/blob/63231756a736c03bc7ac63becec2f5e66af3ad38/gulpfile.js#L38

Now the above solution REALLY should be as simple as:

.pipe(function() {
  return $.if(project.js, $.babel());
})

Buuuut gulp-if relies on gulp-match which after reviewing their source is not working as their readme says so. I can’t be bothered to report/patch the issue now.

Thanks Austin.

Just for posterity…

I couldn’t ever get this to work. No gulp build errors or anything it just won’t recognize any of the es6 syntax (ex. “exports is not defined” browser console error. I’m not asking you to debug this any further because I think this is more of a babel configuration / I’m dumb thing rather than a how-do-I-integrate-this-with-Sage thing.

Thanks for the help.

Regards,
Jason

I tried your two solution, it runs without error but my main.js was not parsed through babel.
Here is my implementation of your code:

.pipe(function() {
  return gulpif(
    project.js.map(function(curr) {
      return require('path').resolve(curr);
    }),
    babel({ presets: ['es2015'] })
  );
})

BUT I finally got it working thanks God !!
I used gulp-filer package,

Enables you to work on a subset of the original files by filtering them
using globbing. When you’re done and want all the original files back
you just use the restore stream.

install with:
npm install --save-dev gulp-filter
and in gulpfile:

var filter       = require('gulp-filter');
var babel        = require('gulp-babel');

and here is my jsTasks

var jsTasks = function(filename) {
  var f = filter(project.js, {restore: true});
  return lazypipe()
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.init());
    })
    .pipe(function() {
      return f;
    })
    .pipe(function() {
      return babel({ presets: ['es2015'] });
    })
    .pipe(function() {
      return f.restore;
    })
    .pipe(concat, filename)
    .pipe(function() {
        return gulpif(
          argv.production,
          uglify({ compress: { 'drop_debugger': enabled.stripJSDebug } })
        );
    })
    .pipe(function() {
      return gulpif(enabled.rev, rev());
    })
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.write('.', {
        sourceRoot: path.source + 'scripts/'
      }));
    })();
};

Well, I don’t understand why I have to put pipe in a function. (It is the problem that bugged me for hours) I tried to do this :

// This DON'T WORK !!!
    .pipe(f)
    .pipe(babel({ presets: ['es2015'] }))
    .pipe(f.restore)

Can you explain it to me ? (I didn’t catch the gulp - pipe workflow very well)

At least it works perfectly now, thanks God.

2 Likes

@abumalick Thank you! I can confirm that this worked for me as well. I had some difficulty getting babel to work with sage’s gulp pipeline, thank you for posting this.

@austin I had a look at the gulpfile.js, it seems like you are setting the base: 'scripts' in scripts task, which is changing the file path for all the streamed file in the next pipelines.

IF, you change your scripts tasks to below one,

gulp.task('scripts', function() {
  var merged = merge();
  manifest.forEachDependency('js', function(dep) {
    merged.add(
      gulp.src(dep.globs, {base: path.source})
        .pipe(plumber({errorHandler: onError}))
        .pipe(jsTasks(dep.name))
    );
  });
  return merged
    .pipe(writeToManifest('scripts'));
});

then, you can simply run babel by checking if the files are in project.js within gulp-if

.pipe(function() {
  return $.if(project.js, $.babel());
})

Then, I guess there is no need to use any plugin like gulp-filter or path to filter/resolve the files.

@austin I do have a question here as well. Is there any particular reason for using base: 'scripts' in the gulp scripts tasks?