BUilding for production

What is a build system?

• Automates repetitive tasks
• AKA task runners
  • grunt
  • gulp
  • etc
• Great for development
• Great for production

During my demo I'll run two commands

• gulp serve
  • should be fast
  • should make developer's life easier
• gulp build
  • ok if its slow
  • prepares app for production

Today we will focus more on gulp build

Demo #0

Prefixer

what does prefixer do?

• Adds browser prefixes so you don't have to
• No more -moz, -webkit, etc

Demo!

DEmo #1

uncss

What is uncss?

• Removes unused CSS code
• Great when using CSS Frameworks

Demo!

Demo #2

Screenshots

What do you mean by screenshots?

• All screen sizes at a glance
• Easier to spot mistakes

Demo!

Demo #3

image-diff

The heck do you mean by image-diff?

• Helps with the struggle between
  designers and developers
   
• What if you had a metric on how similar
  a webpage is to a PSD file?

Demo!

There are a ton of plugins out there... use them!

Thanks :)

 

Follow me:

@hashtagserg

https://github.com/sergiocruz/talk-university-css-build-tools