Building JavaScript with JavaScript

TWeet: @griffith_joel
e-mail: joel@joelgriffith.net

GITHUB: joelgriffith

(Click here for the accompanying repo)

Front-end is hard

  • JavaScript doesn't come "modularized"
  • CSS is declarative and dumb (no logic = dumb)
  • Multiple interpretations of "web browser"
  • Large images are fun
  • "Hey, can I see your app? I'm in NY btw"

Let's Fix this

  • Bundle Our JavaScript into a single file.
  • Run all our unit-tests in any browser we want.
  • Compile all our *CSS files.
  • Minify all our images.
  • Build a "dev" and a "prod" version.
  • Make our local app accessible outside of the network.
  • Super-secret-bonus content.

Step 1:

find a task-runner

Gulp

  • Tasks are just functions
  • Gulp only has 4 methods: src, dest, task, and watch
  • Gulp uses streams, everything is done in memory

Further Reading

Gulp VS Grunt

Grunt is out, Gulp is in

Talk is cheap, let's code

JavaScript: javascript,
CSS:        css,
Images:     image,
HTML:       html,
Tests:      test,
Tunnels:    tunnel,
Watch:      watch

js task

  • Read index.js and it's dependencies
  • Check in `node_modules` for any npm stuff
  • Bundle all files into a single .js file
  • Let's make us a source map
  • Place a readable copy in build/dev
  • Place an ugly copy in build/dist

git checkout javascript

css task

  • Read our index.scss file and dependencies
  • Compile it all down into a single css file
  • Add vendor prefixes cause that's still a thing
  • Place a readable copy in build/dev
  • Place a ugly copy in build/dist

git checkout css

img task

  • Read all .png, .jpg, and .gif files
  • Compress them automatically
  • Move them into our build directories

git checkout image

html task

  • Copy all .html files into both directories

git checkout html

Test task

  • Run our tests anywhere we want
  • Run them on a file save, or not
  • Obviously, do any pre-processing required
  • Let's add some sugar to our big-gulp...

git checkout test

Tunnel task

  • Open our app to outside traffic.
  • We'll get creating the server in a second

git checkout tunnel

watch task

  • Small web-server with LiveReload
  • Let's also specify the default task

git checkout watch

Do we have time?

  • ES6!
  • Notifications!!

git checkout hidden-tasks

That's it folks

see you on the webs

Made with Slides.com