Barebones ES6 project using Gulp

If you haven’t crawled out from underneath your rock yet then let me take hold of you so I can share a secret. ECMAScript 6 is on it’s way and it’s coming fast!

I previously discussed preparing for ES6, but let’s take things one step further and examine an actual project using the tools I discussed in that article. It’s time to get our ES6 on and discover the steps required in order to setup a barebones ES6 project with the help of our faithful tooling companion Gulp.

BTW: I won’t be explaining how to install gulp, npm or node, but feel free to ask if you have questions.


Dependencies

Since features such as template literals in ES6 are not supported yet by any browser nor in Node.js that means you’ll need a transpiler like gulp-babel to churn ES6 code into vanilla ES5.

npm install --save-dev gulp-babel

Following the gulp-babel installation you’ll need to write a task from within your primary Gulp file (gulpfile.js).

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

gulp.task('es6to5', function () {
    return gulp.src('js/src/app.js')
        .pipe(babel())
        .pipe(gulp.dest('dist'));
});

Write ES6 Yo!

Seeing that we have a task that filters ES6 code into useable ES5 code we can actually start writing some ES6 so lets do that right now!

Make a new file called app.js and place it within your directory of choice. For this example I’ll make one called js/src.

Since I really dig the template literals feature of ES6 I’ll use that feature as an example for our gulp-babel task.

ES6 written for app.js

// Expression placeholder
var developer = 'Dennis Gaebel';

console.log(`Yo! My name is ${developer}!`);

// Expressions w/object literal
var author = {
    name: 'Gray Ghost Visuals'
};

console.log(`Thanks for writing awesome articles, ${author.name}.`);

Babel all ES6 things!

It’s great that we know how to write in ES6 all of a sudden, but like I said in the beginning of this article we need to filter our ES6 files so we can actually output useable information to browsers.

Since we already have a task in place all we need to do is simply run the gulp babel task that we created earlier. Or better still, add the babel task to your watch task so it’s doing its thing all the time.

$ gulp es6to5

Conclusion

If you would like to dig deeper into various options that gulp-babel provides you can refer to this list of additional options.

Happy ES6ing!

Want to become a better web developer?

Join over 25,000 other developer & designers who get awesome links to the best news and articles each week delivered directly to their inbox.

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.

2 Comments

  1. Nice article.
    ES6 brings a lot to the table for sure. Another cool language to keep your eyes on is TypeScript; it provides almost everything ES6 will bring and transpiles to ESx easily (e.g., using Gulp plugins)

  2. ‘var’ should be ‘let’ is ES6 code

This post currently has 2 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *