Dev Talk Monday is the series that brings you awesome dev talks every Monday… or Thursday XD

Memory profiling and cleaning memory leaks is hard, or is it?

The Mastering the Arcane Art of JavaScript-mancy series are my humble attempt at bringing my love for JavaScript to all other C# developers that haven’t yet discovered how awesome this language and its whole ecosystem are. These articles are excerpts of the super duper awesome JavaScript-Mancy book a compendium of all things JavaScript for C# developers.

In Automate your front-end workflow with Gulp you learnt the basics of Gulp and how it can help you and your team save precious time by creating and sharing tasks. Tasks that can consist on copying files from one place to another, minifying, bundling, managing depedencies, running tests or transpiling ES6/ES2015 or even TypeScript to a version of JavaScript that is understandable by the browser.

That’s a common problem in modern web development, you want to get started using ES6/ES2015 and enjoy all the juicy new features but you can’t just switch because not every ES6 feature has been implemented by browsers yet. The solution to this problem is to add an extra step to your build process that transpiles ES6 to a version of JavaScript (ES5) that every browser can understand.

You could transpile on-the-fly using Babel.js but it would destroy the user experience of your website. You could also do it manually every time before you check-in your code into source control but then you’d need to deal with merge conflicts on every commit.

A better approach is to automate the ES6 to ES5 conversion with a gulp task so that you can share it with your team and avoid the annoying merge conflicts. Additionally, your continuous integration and delivery servers could use that same gulp task, so it’s a win-win scenario.

So let’s see how you can get started using ES6 with the help of Babel and Gulp.

The Mastering the Arcane Art of JavaScript-mancy series are my humble attempt at bringing my love for JavaScript to all other C# developers that haven’t yet discovered how awesome this language and its whole ecosystem are. These articles are excerpts of the super duper awesome JavaScript-Mancy book a compendium of all things JavaScript for C# developers.

Modern web development is hard. Depending on your environment, your preferences, needs and goals there’s a thousand and one steps from source code to a production ready application.

You may want to use TypeScript or ES2015 for the obvious development benefits but then you need to transpile either one to a version of JavaScript that can run in the browser. You may want to use SASS or LESS, again for the much better development experience they provide, but then you need to transpile them to CSS as well. You need to manage your third party libraries and reference them in your app, and optimize the size of your images for the web, and bundle, minify your assets, add cache busting, etc, etc.

These are a lot of steps that you probably don’t want to keep in your head or in a checklist somewhere. You want to make them an intrinsic part of your development workflow and automate them so that they are reproduceable and reusable by all the members within your team (and even by the continuous integration and delivery infrastructure).

That’s were Gulp and other popular task runners/managers come in. Gulp helps you automate your workflow, make it explicit and share it within your team by providing an API to create and compose tasks. These tasks could be anything from copying files to a distribution folder, to transpiling ES2015, to removing unused CSS classes, etc. You can either build your own task or take advantage of the humongous community that already exist around Gulp and provides access to any task that you can imagine via plugins.

Sounds interesting? Then let’s get started.