Name: traceur compiler and Grunt
Uploaded: 2014-04-22T11:53:12-05:00
Description: Build and watch ECMAscript 6 using traceur compiler and Grunt.

Build and watch ECMAscript 6 using traceur compiler and Grunt.

https://app.egghead.io/api/v1/lessons/traceur-js-and-grunt/subtitles

traceur compiler and Grunt

Man: [00:00] If you're just looking to play around with ES6, head over to es6fiddle.net, load up one of the examples, go ahead and hit "Run," and you can see it handles everything for you. You won't have to set up any sort of local environment, but if you want to set up a local environment, go ahead and install Traceur globally.

[00:15] We're going to use it globally later, and then we'll also install it in our project, so we're inside our project. Do "npm install grunt-traceur-latest." There is an issue. It's just "grunt-traceur," it's not matching the latest version of Traceur, and we'll also install grunt-contrib-watch to watch our files.

[00:39] You can basically copy and paste this grunt file, so I'll just explain it. I've loaded up Traceur, I've loaded up the watch, so whenever watch sees that a file has changed in this JavaScript folder, it'll file off Traceur, which will use the experimental option so we get all of the options, and it'll say that same folder, take all those files and then compile them down into an app file that is inside of our build folder. That's really all there is to it.

[01:05] Let's fire up our grunt watch by running in our terminal. We'll say "grunt-watch," and this will then check any changes to our ES6 file here and compile them out to our build file, so let's open our ES6 file. I'll just an ES6 feature called template strings, which I'll cover more in-depth later, but basically it looks something like this.

[01:25] I'll do one plus one and then close it, and then if the watch is completed successfully, done without errors, and I check my build file, you can see that it compiled down to what it should as far our legacy, our old JavaScript, and from here I have two options.

[01:43] I can either run it in Node or I can run it in the browser, so let's run it in Node first, so I'll switch over to this tab here and I can just say "traceur-build app," which is the output file, run it, and I'll get two, so I'm basically using Traceur to run the compiled file and it'll give me the output, which is just my log statements.

[02:03] Otherwise I can create an HTML file, and just call it index, and if I load up my build file, so this is my compile file, and I try to run this in the browser, you'll see that it works just fine but that's because I haven't used any of the Traceur runtime stuff.

[02:21] If I do something a bit more complex like using classes, you'll see when I try to run this in the browser I'll get a "Traceur runtime is not defined," and that's because the compiled version has references to the Traceur runtime.

[02:37] What you'll need to do is include the Traceur runtime in your browser, which you should already have from installing your Node module, so you can see under Traceur bin you have your Traceur runtime, so I'll just go ahead and use that one. You can also install through "bower install traceur-runtime," and I'm sure there's a Yeoman packet as in everything.

[02:57] Now, when I switch over to Chrome and I refresh, you can see that Traceur runtime error went away and you have, "Hi, I am a square with 25."

[03:07] Now you're all setup to use Traceur with grunt, but if you'd rather just use Traceur from the command line, it's just as easy to go "traceur --out," then where you want to compile the file to, then say take in this script of app.js, and make sure to include the experimental flag, and once you hit "Enter," it'll compile everything out for you and build out that compiled Traceur file.

traceur compiler and Grunt

Share this video with your friends