Gulp and Browserify - Adding Babel & Source Maps
What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using exorcist.
[00:00] We've got a really nice workflow set up here with Gulp, Browserify and BrowserSync. Next, we want to add the ability to write in the next version of JavaScript, whatever that may be.
[00:13] For example, should we want to use default function parameters, along with some string interpolation. Start our server to see this in action.
[00:37] If we open up the console, we're going to see that we've got an error here. One expected token. This is because at the time of recording, default function parameters are not yet supported in Chrome.
[00:55] To fix this, we can use a popular project called Babel. Close that, npm install babelify. Back in our Gulp file, we'll bring that in.
[01:17] Babelify is a wrapper around the Babel project, that enables it to be used as a transformer for Browserify. Before we call bundle, we simply call transform and pass that along Babelify.
[01:35] This will act on every file that comes through our bundle.
[01:43] We can check that's working by running our server again. Reload the browser and you can see default function parameters have now compiled correctly. Just to prove it is working, you can change that, hit "Save," and there you go.
[02:05] Now we have ES6 compilation, along with a live reloading development server that should enable a really efficient workflow.
[02:16] There is one more piece to this puzzle, however. If I put a debug statement here, you can see that the debugger has RAM, but it's reporting that we're in bundle.js line 14. Which is correct, according to Chrome, because it's loading this file. You can see line 14 here.
[02:46] But when debugging our code, we want it to report greeting.js line 2. For that, we need source maps. We'll close down the server, go back to our Gulp file, and install Exorcist. Bringing it into our Gulp file.
[03:15] Exorcist, as the name suggests, can extract a source map from a Browserify stream. The way you hook this up is, you put it before, we've transformed the Browserify stream into the vinyl source stream.
[03:32] We simply pipe into it, and we pass it along wherever we want our source map to be called. We'll pull it alongside the bundle file. We'll say app.js.map.
[03:51] There's one more thing we need to do to enable this. Browserify needs to know that we're in debug mode, so that it generates source maps. We'll take this out of here, and we'll first add to it debug = true. That should be enough.
[04:12] Let's run our task again. This time, when the debugger runs, we are in greeting.js line 2, which is exactly where we placed the debugger statement.
It looks like the exorcist library is not actively maintained anymore, and the example does not work.
The gulp-sourcemap library is a more up-to-date choice for now but there are bugs with the source map.