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

Building JavaScript with JavaScript FULL

By Joel Griffith

Made with Slides.com

Building JavaScript with JavaScript FULL

Managing all the components of web-app can be a difficult experience. The list of what needs to be done is incredibly long: merge your JavaScript into a single file, run all your stylesheet pre-processors, optimize your images, and run all your tests. This presentation will give you the tools to run all of this automatically, and leave you more time to work on the projects you want to.

  • 1,935

More from Joel Griffith