Webpack & Babel & ES6 & CSS & PostCSS & NPM & Grunt & Gulp &...

Oh my!

A Tooling Explainer

Motivation

Tool Categories

Task Runners

Transpilers

Module Bundlers

All I wanted to do was build a web page... :(

These tools give you superpowers

Package Managers

Package Managers

Package Managers

Task Runners

Task Runners

Recipes

Transpilers

Transpilers

Turn one thing into another thing

that the browser can understand

Module Bundlers

Module Bundlers

Manage your dependencies: no more endless <script> tags

Include other filetypes locally

babel src/index.js --out-file dist/compiled.js
node-sass --output-style compressed -o dist/css src/scss
postcss --use autoprefixer *.css -d build/
grunt dev:watch
npm start

DEMO

But wait... there's more!

Go for it

Made with Slides.com