Add Babel task/recipe

[oskarrough]

Hi, would you be open to do an optional babel task (or recipe)? I've got it more or less working but there are some issues with uglify and how to properly fit the useref/serve/dist tasks properly.

[silvenon]

Absolutely 👍 We'd like to include it in the core.

[silvenon]

You can open the PR with what you have and we can help you to finish it.

[yonatanmn]

would like to see that happen too.

[pascaloliv]

Yes ! 👍 + 1

[oskarrough]

Feels like I won't have time to open a PR but here's the task I'm currently using:

// Compile JavaScript with ES2015+
gulp.task('scripts', () => {
    return gulp.src(['app/scripts/**/*.js', '!app/scripts/vendor/**/*.js'])
        .pipe($.sourcemaps.init())
        .pipe($.babel())
        .pipe($.concat('main.js'))
        .pipe(gulp.dest('.tmp/scripts'))
        .pipe($.sourcemaps.write('.'))
        .pipe(browserSync.stream({ match: '**/*.js' }));
});

Not quite sure how it'll play together with the html task of this generator?

[silvenon]

Yeah, some adjustments will have to be made… Thanks for sharing your workflow.

[vdclouis]

I guess you can just add it to the html task?

return gulp.src('app/*.html')
    .pipe(assets)
    .pipe($.if('*.js', $.babel(), $.uglify()))
    .pipe($.if('*.css', $.minifyCss({compatibility: '*'})))
    .pipe(assets.restore())
    .pipe($.useref())
    .pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
    .pipe(gulp.dest('dist'));

Not sure how this will work with gulp serve though...
As you would need babel to transpile your js on the fly

[neilhem]

After moving from grunt to gulp we use config like this:

gulp.task('babel', () => {
  return gulp.src(['app/scripts/**/*.js'])
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('.tmp/scripts'))
    .pipe(reload({stream: true}));
});

[wenerme]

@neilhem How you watch and recompile ?
I use you task config

gulp.task('scripts', () => {
  return gulp.src(['app/scripts/**/*.js', '!app/scripts/vendor/**/*.js'])
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('.tmp/scripts'))
    .pipe(reload({stream: true}));
});

And add

gulp.watch('app/script/**/*.js', ['scripts']);
gulp.watch('app/script/main.js', ['scripts']);

to serve, but it will not recompile the js . How can I do ?

[wenerme]

Changed to

gulp.watch('app/**/*.js', ['scripts']);

works, why ?

[colinwhat]

I added the watch tasks, but is the 'scripts' task that @wenerme added also working for the build? I can't tell if the build is building from the source files or the tmp folder.

[alexej-d]

It's a pity the pull request received no updates any more, would love to have an easy way to write es6 js 😞

[silvenon]

Yeah, it needs to be rebased and updated. I'll soon get around to fixing some long overdue issues, Babel will be one of them.

[alexej-d]

Sounds awesome! Looking forward! 😍

[Keyamoon]

Is it planned to support es6 modules with npm packages?

[silvenon]

For that we would need to add a module bundler. Since there are so many (browserify, webpack, jspm…), we're hesitant about that. E.g. webpack could replace gulp altogether, so that would be a major rewrite and should perhaps be a separate project.

Do you have some preferences?

[alexej-d]

Probably leave out the module functionality and integrate that into another project to keep that one simple. (e.g. only add basic transpiling to this generator)

[silvenon]

@alexej-d yes, my thoughts exactly.

[Keyamoon]

I have only used browserify so far. A separate project would be fine, but supporting modules using browserfiy wouldn't be that complicated either.

[silvenon]

Released in v1.1.0.

[silvenon]

@Keyamoon by the way, I'm maintaining generator-wbp, which uses browserify and stuff, it might be what you're looking for?

[Keyamoon]

@silvenon Thanks. Will take a look. With all the build tool options available, I'm no longer sure what I'm looking for!

[silvenon]

@Keyamoon I feel you. I spent a lot of time using and studying these tools, here's the summary of my experience:

• gulp – useful for presentation sites and small JS apps, but not flexible enough for heavy JS apps
• browserify – easy to understand for beginners, but a task runner like gulp is probably still needed, and browserify's setup is not so pretty 😅
• webpack – useful for JS apps (not so much for presentation sites), harder to understand at first, but totally worth it because it's very powerful and flexible with a much smaller configuration, no task runner needed

If you have questions, feel free to send me an email or something, I'd be happy to help further.

[Keyamoon]

@silvenon That's a good summary. Thanks for sharing.