Mastering the 'Lazy' Mindset

Using GulpJS

Joe Skeen

Intermountain Healthcare

So what do you mean by 'lazy'?

from the Oxford Dictionary:

"Unwilling to work or use energy"

from Joe's dictionary:

"Unwilling to work or use energy on things machines can already do for you"

for example

Web development is easy!

All you have to know how to do is...

mastering modern web development requires mastering many, many tools and concepts

...and you need to remember to do all of them in the right order.

Every time.

The Lazy Way

Let a tool manage all that for you

Can Help

Automate Repetitive Tasks
Reduce Human Error
Improve Practices

Before we get ahead of ourselves

When is Gulp not a good choice?

Adequate task automation is already available
There is very little to automate (if Gulp would be overkill)

When to use Gulp?

Your project doesn't have task automation
Your project's existing task automation is limiting your productivity
You are creating a seed project or a generator

Gulp Basics

Gulp runs tasks from a Gulpfile
(gulpfile.js, gulpfile.ts, gulpfile.coffee, etc.)

gulp.task defines a task

gulp.src takes source files and creates a stream of file objects

gulp.dest writes the transformed source files back to disk

Call .pipe() on the stream to add a transform step for the files

Image Source

Call .pipe() on the stream to add a transform step for the files

Gulp plugins give you many options for transforming your files

gulpjs.com/plugins

Gulp tasks can depend on other tasks

gulp.watch() will watch the files for changes then execute one or more tasks

Where do we start?

the most successful lazy people understand the problem they are avoiding

The problem

Building a production-quality web app requires a lot of steps

*for the purposes of this discussion we'll talk about building an Angular 1.x app with TypeScript

High-Level Objectives

serve up code while developing
run tests (unit tests and/or ui tests)
optimize / bundle app for production
serve up production version for prerelease testing
deal with the backend server (Node, Java, etc.)

How would I do the process manually?

Development

make a code change and save - watch for changes
lint the code - script files
compile the TS to JS - script files
run ngAnnotate - script files
compile SASS to CSS - style files
inject script references into HTML file - index
serve the code - live reload
verify the results

Handle Script Files

Handle Style Files

Inject files into Index

Pat yourself on the back here's one I made earlier

The best lazy people

Don't reinvent the wheel

If someone has already found a good solution,
adapt it to your own use case!

Here's one I made earlier

github.com/joeskeen/ngExamples (mars-ts folder)

Now it's your turn!

npm install -g gulp-cli

npm install --save-dev gulp

https://joeskeen.github.io/gulp-OpenWest2016

Slides: joeskeen.github.io/gulp-OpenWest2016
Review this talk: https://joind.in/talk/7bf7f