streamlined workflow using grunt wordcamp north canton 2015

59
@joelworsham STREAMLINED WORKFLOW USING GRUNT + =

Upload: joelworsham

Post on 18-Aug-2015

119 views

Category:

Internet


0 download

TRANSCRIPT

@joelworsham

STREAMLINED WORKFLOW USING

GRUNT

+ =

@joelworsham

WHO AM I? #SMITTENWITHTHEMITTEN

@joelworsham

THIS IS YOUR PROJECT

@joelworsham

PROBLEMS GETTING TO A STREAMLINED PROJECT

@joelworsham

MONOTONY

@joelworsham

UNMANAGEABLE CODE

@joelworsham

STUPID MISTAKES

@joelworsham

THE HARD-HITTING TRUTH

@joelworsham

Proj

ect L

ine

Cou

nt

0

250

500

750

1000

Cups of Coffee Per Week (millions)

50 150 500 1000

@joelworsham

Life

Exp

ecta

ncy

(yea

rs)

0

25

50

75

100

Doctors Astronauts Male Models Programmers

@joelworsham

DON’T LET THIS HAPPEN TO YOU!

@joelworsham

WHAT TO DO?

@joelworsham

AUTOMATION

@joelworsham

@joelworsham

WHAT IS IT

@joelworsham

“AUTOMATION, PERFORMING REPETITIVE TASKS LIKE MINIFICATION, COMPILATION,

UNIT TESTING AND LINTING.”

@joelworsham

SPEED EFFICIENCY ACCURACY

@joelworsham

WHO USES GRUNT?

@joelworsham

HOW CAN GRUNT HELP ME?

@joelworsham

Life

Exp

ecta

ncy

(yea

rs)

0

25

50

75

100

Doctors Astronauts Male Models Programmers

REMEMBER!

@joelworsham

MONOTONY

@joelworsham

MONOTONY AUTOMATED TASKS

@joelworsham

UNMANAGEABLE CODE

@joelworsham

UNMANAGEABLE CODE MINIFICATION AND CONCATENATION

@joelworsham

STUPID MISTAKES

@joelworsham

STUPID MISTAKES 100% ACCURACY FROM AUTOMATION

@joelworsham

THE NITTY-GRITTY

@joelworsham

WHAT DO I NEED?

@joelworsham

WHAT IS IT, REALLY?

@joelworsham

WHAT YOU WILL HAVE IN THE PROJECT

@joelworsham

GRUNTFILE.JS PACKAGE.JSON

@joelworsham

THAT’S IT!

@joelworsham

GRUNTFILE.JS

@joelworsham

PACKAGE.JSON

@joelworsham

EXAMPLE USAGE

@joelworsham

1) WATCH FOR FILE CHANGES 2) AUTOMATICALLY RUN TASKS 3) LINT FILES FOR POTENTIAL ERRORS 4) COMPILE SASS INTO ONE MINIFIED CSS FILE 5) ADD BROWSER PREFIXES TO CSS FILE 6) COMPILE JAVASCRIPT INTO ONE MINIFIED JS FILE 7) UPLOAD VIA SSH TO THE DEPLOYMENT SERVER 8) NOTIFY WHEN COMPLETE

@joelworsham

BUILD SCRIPT

@joelworsham

1) UPDATE VERSIONING BASED ON PACKAGE.JSON 2) CLEAN FILES USING REGEX 3) SYNC SPECIFIC FILES TO NEW DIRECTORY 4) EXTRA FILE MINIFICATION / CONCATENATION 5) UNIT TESTING

@joelworsham

GRUNT WON’T FIX EVERYTHING

@joelworsham

6 TIPS FOR A KILLER PROJECT WORKFLOW

(OR YOUR NEXT ONE IS FREE)

@joelworsham

#1

@joelworsham

A CODE EDITOR IS NOT AN IDE

#2

@joelworsham

GIT WITH THE PROGRAM

#3

@joelworsham

FIND OUT WHAT YOUR BROWSER CAN DO FOR YOU

#4

@joelworsham

STAY UPDATED!!!

#5

@joelworsham

DON’T RE-INVENT THE WHEEL

#6

@joelworsham

• gruntjs.com/getting-started

• gruntjs.com/sample-gruntfile

• github.com/npm/npm#super-easy-install

• nodejs.org

• nvie.com/posts/a-successful-git-branching-model

• foundation.zurb.com

• jetbrains.com/phpstorm

@joelworsham Tweet me! I’ll (probably) respond.