Gulp and Grunt

@john_papa grunt and gulp JOHN PAPA

JavaScript Task Runners @john_papa

@john_papa Why use a task runner ? Automation

@john_papa Repeating the same mistakes gets old

@john_papa What’s in it for you? Improve quality Deliver
faster Repeatable / Consistent

@john_papa Automate tasks you don’t want to do  Code
quality  Minifying  Run tests

@john_papa Work smarter, not harder

@john_papa What are gulp and grunt?  Build automa:on tools
 Alleviates cri:cal but monotonous work  Frees up your :me!

@john_papa How are they different ?  Code over conﬁgura:on
 Stream based  Conﬁgura:on over code  File based

@john_papa How would you create this workflow?  Get ﬁles
 Modify them  Make new ones

@john_papa typical grunt task Modify File System
Temp Read Files Write Files Modify Temp Read Files Write Files Modify Temp Read Files Write Files

@john_papa gulp uses streams Modify Modify Modify
File System File System Read Files Write Files

Task automation with gulp Coding with streams

@john_papa Before you begin  Download & install node.js
◦ hMp://nodejs.org  Install globally (run from any path)

@john_papa gulp in a nutshell Install gulp globally
1 Create package ﬁle 2 Install dependent packages 3 Code your tasks in gulpﬁle.js 4 Load tasks into gulp 5

@john_papa Create package.json file  Prompts you for author, package
name, and basics

@john_papa Install gulp locally to the package -‐-‐save-‐dev
is for development -‐-‐save is for produc:on

@john_papa Installing package dependencies Combine ﬁles into 1
Minify ﬁles Verify code quality

@john_papa package.json to manage dependencies

@john_papa Good news! Only 4 simple APIs

@john_papa 1. gulp.task ( name, [dep], fn)  Registers a
task name with a func:on  Op:onally declare dependencies

@john_papa 2. gulp.src ( glob )  Takes a file
system glob (set of files)  Emits files that match

@john_papa 3. gulp.dest ( folder )  Piped ﬁles are
wriMen to the ﬁle system

@john_papa 4. gulp.watch ( glob, fn )  Run a
func:on when the glob changes

@john_papa You are a gulp expert!  task  src
 dest  watch

@john_papa gulpfile.js  Your code deﬁning your tasks  Loads
the plugins

@john_papa gulpfile.js

@john_papa Running gulp  From terminal or command prompt

@john_papa Task dependencies run in parallel

@john_papa Task dependency chains

gulp demo

Task automation with grunt Conﬁgura:on over code

@john_papa How are they different ?  Code over conﬁgura:on
 Conﬁgura:on over code

@john_papa Before you begin  Download & install node.js
◦ hMp://nodejs.org  Install globally (run from any path)

@john_papa grunt in a nutshell Install CLI 1
Create package file 2 Install dependent packages 3 Configure tasks in grunìle.js 4 Load tasks into grunt 5 Register custom tasks 6

@john_papa Create package.json file  Prompts you for
◦ author ◦ package name ◦ basics

@john_papa Install grunt locally to the package

@john_papa Installing package dependencies Install 1 or more

@john_papa package.json to manage dependencies

@john_papa gruntfile.js  Your task conﬁgura:on  JSON style
 Loads the plugins

@john_papa grunt 101  grunt wrapper  Task conﬁgura:on
 Loading tasks  Register custom tasks  Organiza:on :ps

@john_papa grunt wrapper

@john_papa Task configuration

@john_papa gruntfile.js

@john_papa Load tasks Load npm tasks into
grunt Task names

@john_papa Custom tasks Custom task name Tasks
to run

@john_papa Running grunt  From terminal or command prompt

@john_papa Massive gruntfile.js is a common problem

@john_papa Stop config from getting out of hand

@john_papa Organize into config files

grunt or gulp ? Choose 1, not both

@john_papa  Conﬁgura:on over code  File based  2400+
packages  < 2 years old  Very widely used  Code over conﬁgura:on  Stream based  400+ packages  < 1 year old  Rising rapidly

@john_papa Choose whichever is easier to read and write

@john_papa Demo  Crea:ng a project from code  hMps://github.com/johnpapa/ng-‐demos

@john_papa Resources  node.js hMp://nodejs.org  gulp hMp://gulpjs.com
 grunt hMp://gruntjs.com  Sample code ◦ hMps://github.com/johnpapa/ng-‐demos/grunt-‐gulp

Gulp and Grunt

Gulp and Grunt

More Decks by John Papa

Other Decks in Technology

Featured

Transcript