SlideShare a Scribd company logo
Getting to Know Grunt
By Writing Your Own Plugin
@jamiestrachan
1. Scaffold
2a. Develop
2b. Test
3. Publish
Scaffold
Scaffold Develop Test Publish
Scaffold Develop Test Publish
Running grunt-init
Running grunt-init
?
Scaffold Develop Test Publish
“This scaffolding task was always an odd-duck, and it really
deserves it’s own project. So, we’ve broken it into a separate
npm module, grunt-init … In the coming weeks, the Yeoman
team will be replacing this task entirely, using their rails-
inspired generator system.”
February 18, 2013
https://bocoup.com/weblog/tearing-grunt-apart/
Scaffold Develop Test Publish
Scaffold Develop Test Publish
README.md
Scaffolded plugin
package.json
Scaffolded plugin
Develop
Scaffold Develop Test Publish
Gruntfile.js
grunt-sass-version
tasks/sass_version.js
grunt-sass-version
Gruntfile.js
grunt-sass-version grunt-sass-version
tasks/sass_version.js
tasks/<plugin>.js
Scaffolded plugin
tasks/lib/_sass_version.js
grunt-sass-version
tasks/lib/_sass_version.js
grunt-sass-version
package.json
grunt-sass-version
Test
Scaffold Develop Test Publish
Scaffold Develop Test Publish
Code Quality
Scaffold Develop Test Publish
Unit Testing
Scaffold Develop Test Publish
Gruntfile.js
Scaffolded plugin
test/<plugin>_test.js
Scaffolded plugin
Scaffold Develop Test Publish
nodeunit tests
sass_version.js
lib/_sass_version.jsGrunt input Grunt output
success,
message
test/sass_version_test.js
grunt-sass-version
Integration Testing
Scaffold Develop Test Publish
package.json
{ "dependencies" : {
"til" : "~1.2",
"elf" : "^1.2.3",
"asd" : "http://asdf.com/asdf.tar.gz",
"gitproj" : "git://github.com/user/project.git#commit-ish",
"dyl" : "file:../dyl"
} }
Scaffold Develop Test Publish
npm link
Publish
Scaffold Develop Test Publish
npm publish
Scaffold Develop Test Publish
1. register at npmjs.com
2. npm adduser
7. (npm unpublish)
So what?
Scaffolding
solid tools available: grunt-init, Yeoman
saves time
avoids mistakes
makes dull work easier
you can find existing templates or make your own
Testing
develop with testing in mind
use an automated testing tool like nodeunit
Managing Dependencies
npm link for local dependencies
git repos for unregistered dependencies
create distributed projects with npm
Contributing
process is similar for:
gulp plugins
grunt-init templates
Yeoman generators
hubot scripts
Learn your tools
Thanks!
Getting to Know Grunt By Writing Your Own Plugin
@jamiestrachan

More Related Content

What's hot

iOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
iOS Developers Conference-iOS Automation with Cucumber, Appium and SaucelabsiOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
iOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
Shashikant Jagtap
 
Lazy angular w/ webpack
Lazy angular w/ webpackLazy angular w/ webpack
Lazy angular w/ webpack
Rich Snapp
 
Dyno cycling behavior of Heroku
Dyno cycling behavior of HerokuDyno cycling behavior of Heroku
Dyno cycling behavior of Heroku
Shunji Konishi
 
Dockerising Appium : London Appium Meetup
Dockerising Appium : London Appium MeetupDockerising Appium : London Appium Meetup
Dockerising Appium : London Appium Meetup
Shashikant Jagtap
 
J hipster
J hipsterJ hipster
J hipster
Rasmita Jena
 
Angular & rails
Angular & railsAngular & rails
Angular & rails
neodynamic
 
Swagger code motion talk
Swagger code motion talkSwagger code motion talk
Swagger code motion talk
Victor Trakhtenberg
 
Lifthub (#rpscala 26)
Lifthub (#rpscala 26)Lifthub (#rpscala 26)
Lifthub (#rpscala 26)
k4200
 
AngularJS
AngularJSAngularJS
Gitlab flow solo
Gitlab flow soloGitlab flow solo
Gitlab flow solo
viniciusban
 
GR8Conf 2015 - Spring Boot and Groovy. What more do you need?
GR8Conf 2015 - Spring Boot and Groovy. What more do you need?GR8Conf 2015 - Spring Boot and Groovy. What more do you need?
GR8Conf 2015 - Spring Boot and Groovy. What more do you need?
Iván López Martín
 
Presentacion minitest
Presentacion minitestPresentacion minitest
Presentacion minitest
Ismael G Marín C
 
What grunt?
What grunt?What grunt?
What grunt?
Lucio Martinez
 
MVC way to introduce Sails.js - node.js framework
MVC way to introduce Sails.js - node.js frameworkMVC way to introduce Sails.js - node.js framework
MVC way to introduce Sails.js - node.js framework
Caesar Chi
 
What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017
Matt Raible
 
Use groovy & grails in your spring boot projects
Use groovy & grails in your spring boot projectsUse groovy & grails in your spring boot projects
Use groovy & grails in your spring boot projects
Fátima Casaú Pérez
 
C初心者がbyebugにPR出した話
C初心者がbyebugにPR出した話C初心者がbyebugにPR出した話
C初心者がbyebugにPR出した話
tzm_freedom
 
APIテストあれこれ
APIテストあれこれAPIテストあれこれ
APIテストあれこれ
tzm_freedom
 
Node.js x Azure, cli usage, website deployment
Node.js x Azure, cli usage, website deploymentNode.js x Azure, cli usage, website deployment
Node.js x Azure, cli usage, website deployment
Caesar Chi
 
WebSocketでカメラの映像を共有してみた
WebSocketでカメラの映像を共有してみたWebSocketでカメラの映像を共有してみた
WebSocketでカメラの映像を共有してみた
onozaty
 

What's hot (20)

iOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
iOS Developers Conference-iOS Automation with Cucumber, Appium and SaucelabsiOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
iOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
 
Lazy angular w/ webpack
Lazy angular w/ webpackLazy angular w/ webpack
Lazy angular w/ webpack
 
Dyno cycling behavior of Heroku
Dyno cycling behavior of HerokuDyno cycling behavior of Heroku
Dyno cycling behavior of Heroku
 
Dockerising Appium : London Appium Meetup
Dockerising Appium : London Appium MeetupDockerising Appium : London Appium Meetup
Dockerising Appium : London Appium Meetup
 
J hipster
J hipsterJ hipster
J hipster
 
Angular & rails
Angular & railsAngular & rails
Angular & rails
 
Swagger code motion talk
Swagger code motion talkSwagger code motion talk
Swagger code motion talk
 
Lifthub (#rpscala 26)
Lifthub (#rpscala 26)Lifthub (#rpscala 26)
Lifthub (#rpscala 26)
 
AngularJS
AngularJSAngularJS
AngularJS
 
Gitlab flow solo
Gitlab flow soloGitlab flow solo
Gitlab flow solo
 
GR8Conf 2015 - Spring Boot and Groovy. What more do you need?
GR8Conf 2015 - Spring Boot and Groovy. What more do you need?GR8Conf 2015 - Spring Boot and Groovy. What more do you need?
GR8Conf 2015 - Spring Boot and Groovy. What more do you need?
 
Presentacion minitest
Presentacion minitestPresentacion minitest
Presentacion minitest
 
What grunt?
What grunt?What grunt?
What grunt?
 
MVC way to introduce Sails.js - node.js framework
MVC way to introduce Sails.js - node.js frameworkMVC way to introduce Sails.js - node.js framework
MVC way to introduce Sails.js - node.js framework
 
What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017
 
Use groovy & grails in your spring boot projects
Use groovy & grails in your spring boot projectsUse groovy & grails in your spring boot projects
Use groovy & grails in your spring boot projects
 
C初心者がbyebugにPR出した話
C初心者がbyebugにPR出した話C初心者がbyebugにPR出した話
C初心者がbyebugにPR出した話
 
APIテストあれこれ
APIテストあれこれAPIテストあれこれ
APIテストあれこれ
 
Node.js x Azure, cli usage, website deployment
Node.js x Azure, cli usage, website deploymentNode.js x Azure, cli usage, website deployment
Node.js x Azure, cli usage, website deployment
 
WebSocketでカメラの映像を共有してみた
WebSocketでカメラの映像を共有してみたWebSocketでカメラの映像を共有してみた
WebSocketでカメラの映像を共有してみた
 

Viewers also liked

Designing True Cross-Platform Apps
Designing True Cross-Platform AppsDesigning True Cross-Platform Apps
Designing True Cross-Platform Apps
FITC
 
Graphic Designer to Object Designer: Your 3D Printing Evolution
Graphic Designer to Object Designer: Your 3D Printing EvolutionGraphic Designer to Object Designer: Your 3D Printing Evolution
Graphic Designer to Object Designer: Your 3D Printing Evolution
FITC
 
Accumulations with Nicholas Felton
Accumulations with Nicholas FeltonAccumulations with Nicholas Felton
Accumulations with Nicholas Felton
FITC
 
How We Used To, How We Will
How We Used To, How We WillHow We Used To, How We Will
How We Used To, How We Will
FITC
 
Technical Intuition
Technical IntuitionTechnical Intuition
Technical Intuition
FITC
 
I HATE YOUR GAME with Bob Heubel
I HATE YOUR GAME with Bob HeubelI HATE YOUR GAME with Bob Heubel
I HATE YOUR GAME with Bob Heubel
FITC
 
Unleashing the Power of 3D with WebJS
Unleashing the Power of 3D with WebJSUnleashing the Power of 3D with WebJS
Unleashing the Power of 3D with WebJS
FITC
 
Open Sourcing the Secret Sauce
Open Sourcing the Secret SauceOpen Sourcing the Secret Sauce
Open Sourcing the Secret Sauce
FITC
 
Building Apps with Ember
Building Apps with EmberBuilding Apps with Ember
Building Apps with Ember
FITC
 
The Life of &lt;p>
The Life of &lt;p>The Life of &lt;p>
The Life of &lt;p>
FITC
 
Just Make Stuff!
Just Make Stuff!Just Make Stuff!
Just Make Stuff!
FITC
 
Components are the Future of the Web: It’s Going To Be Okay
Components are the Future of the Web: It’s Going To Be OkayComponents are the Future of the Web: It’s Going To Be Okay
Components are the Future of the Web: It’s Going To Be Okay
FITC
 
From Box to Bots in Minutes
From Box to Bots in MinutesFrom Box to Bots in Minutes
From Box to Bots in Minutes
FITC
 
Building Tools for the Next Web
Building Tools for the Next WebBuilding Tools for the Next Web
Building Tools for the Next Web
FITC
 
Functional Web Development
Functional Web DevelopmentFunctional Web Development
Functional Web Development
FITC
 
Adapt or Die
Adapt or DieAdapt or Die
Adapt or Die
FITC
 
How to SURVIVE the Creative Industry
How to SURVIVE the Creative IndustryHow to SURVIVE the Creative Industry
How to SURVIVE the Creative Industry
FITC
 
When Clients Bare it All with David Allen
When Clients Bare it All with David AllenWhen Clients Bare it All with David Allen
When Clients Bare it All with David Allen
FITC
 
Squishy pixels
Squishy pixelsSquishy pixels
Squishy pixels
FITC
 
Managing The Process
Managing The ProcessManaging The Process
Managing The Process
FITC
 

Viewers also liked (20)

Designing True Cross-Platform Apps
Designing True Cross-Platform AppsDesigning True Cross-Platform Apps
Designing True Cross-Platform Apps
 
Graphic Designer to Object Designer: Your 3D Printing Evolution
Graphic Designer to Object Designer: Your 3D Printing EvolutionGraphic Designer to Object Designer: Your 3D Printing Evolution
Graphic Designer to Object Designer: Your 3D Printing Evolution
 
Accumulations with Nicholas Felton
Accumulations with Nicholas FeltonAccumulations with Nicholas Felton
Accumulations with Nicholas Felton
 
How We Used To, How We Will
How We Used To, How We WillHow We Used To, How We Will
How We Used To, How We Will
 
Technical Intuition
Technical IntuitionTechnical Intuition
Technical Intuition
 
I HATE YOUR GAME with Bob Heubel
I HATE YOUR GAME with Bob HeubelI HATE YOUR GAME with Bob Heubel
I HATE YOUR GAME with Bob Heubel
 
Unleashing the Power of 3D with WebJS
Unleashing the Power of 3D with WebJSUnleashing the Power of 3D with WebJS
Unleashing the Power of 3D with WebJS
 
Open Sourcing the Secret Sauce
Open Sourcing the Secret SauceOpen Sourcing the Secret Sauce
Open Sourcing the Secret Sauce
 
Building Apps with Ember
Building Apps with EmberBuilding Apps with Ember
Building Apps with Ember
 
The Life of &lt;p>
The Life of &lt;p>The Life of &lt;p>
The Life of &lt;p>
 
Just Make Stuff!
Just Make Stuff!Just Make Stuff!
Just Make Stuff!
 
Components are the Future of the Web: It’s Going To Be Okay
Components are the Future of the Web: It’s Going To Be OkayComponents are the Future of the Web: It’s Going To Be Okay
Components are the Future of the Web: It’s Going To Be Okay
 
From Box to Bots in Minutes
From Box to Bots in MinutesFrom Box to Bots in Minutes
From Box to Bots in Minutes
 
Building Tools for the Next Web
Building Tools for the Next WebBuilding Tools for the Next Web
Building Tools for the Next Web
 
Functional Web Development
Functional Web DevelopmentFunctional Web Development
Functional Web Development
 
Adapt or Die
Adapt or DieAdapt or Die
Adapt or Die
 
How to SURVIVE the Creative Industry
How to SURVIVE the Creative IndustryHow to SURVIVE the Creative Industry
How to SURVIVE the Creative Industry
 
When Clients Bare it All with David Allen
When Clients Bare it All with David AllenWhen Clients Bare it All with David Allen
When Clients Bare it All with David Allen
 
Squishy pixels
Squishy pixelsSquishy pixels
Squishy pixels
 
Managing The Process
Managing The ProcessManaging The Process
Managing The Process
 

Similar to Getting to Know Grunt By Writing Your Own Plugin

Groovy Maven Builds
Groovy Maven BuildsGroovy Maven Builds
Groovy Maven Builds
Evgeny Goldin
 
Scripting Support in GFv3 Prelude - Full Version
Scripting Support in GFv3 Prelude - Full VersionScripting Support in GFv3 Prelude - Full Version
Scripting Support in GFv3 Prelude - Full Version
Eduardo Pelegri-Llopart
 
G*なクラウド 雲のかなたに ショートバージョン
G*なクラウド 雲のかなたに ショートバージョンG*なクラウド 雲のかなたに ショートバージョン
G*なクラウド 雲のかなたに ショートバージョン
Tsuyoshi Yamamoto
 
Grunt
GruntGrunt
Grunt & Front-end Workflow
Grunt & Front-end WorkflowGrunt & Front-end Workflow
Grunt & Front-end Workflow
Pagepro
 
Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!
Dirk Ginader
 
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Dirk Ginader
 
Npm scripts
Npm scriptsNpm scripts
Npm scripts
정윤 김
 
Workshop 3: JavaScript build tools
Workshop 3: JavaScript build toolsWorkshop 3: JavaScript build tools
Workshop 3: JavaScript build tools
Visual Engineering
 
Automated Performance Testing With J Meter And Maven
Automated  Performance  Testing With  J Meter And  MavenAutomated  Performance  Testing With  J Meter And  Maven
Automated Performance Testing With J Meter And Maven
PerconaPerformance
 
Testing Drupal with Ghosts and Gherkin
Testing Drupal  with Ghosts and GherkinTesting Drupal  with Ghosts and Gherkin
Testing Drupal with Ghosts and Gherkin
Phase2
 
Grunt - The JavaScript Task Runner
Grunt - The JavaScript Task RunnerGrunt - The JavaScript Task Runner
Grunt - The JavaScript Task Runner
Mohammed Arif
 
Gradle - time for a new build
Gradle - time for a new buildGradle - time for a new build
Gradle - time for a new build
Igor Khotin
 
20091226 名古屋SGGAE/J勉強会発表資料『Lift on GAE/J』
20091226 名古屋SGGAE/J勉強会発表資料『Lift on GAE/J』20091226 名古屋SGGAE/J勉強会発表資料『Lift on GAE/J』
20091226 名古屋SGGAE/J勉強会発表資料『Lift on GAE/J』
Ryo RKTM
 
Bundling Client Side Assets
Bundling Client Side AssetsBundling Client Side Assets
Bundling Client Side Assets
Timothy Oxley
 
Yeoman Workflow
Yeoman WorkflowYeoman Workflow
Yeoman Workflow
John-Philip Johansson
 
2015 - Basta! 2015, DE: JavaScript und build
2015 - Basta! 2015, DE: JavaScript und build2015 - Basta! 2015, DE: JavaScript und build
2015 - Basta! 2015, DE: JavaScript und build
Daniel Fisher
 
GlassFish Embedded API
GlassFish Embedded APIGlassFish Embedded API
GlassFish Embedded API
Eduardo Pelegri-Llopart
 
Automating Front-End Workflow
Automating Front-End WorkflowAutomating Front-End Workflow
Automating Front-End Workflow
Dimitris Tsironis
 
JLPDevs - Optimization Tooling for Modern Web App Development
JLPDevs - Optimization Tooling for Modern Web App DevelopmentJLPDevs - Optimization Tooling for Modern Web App Development
JLPDevs - Optimization Tooling for Modern Web App Development
JLP Community
 

Similar to Getting to Know Grunt By Writing Your Own Plugin (20)

Groovy Maven Builds
Groovy Maven BuildsGroovy Maven Builds
Groovy Maven Builds
 
Scripting Support in GFv3 Prelude - Full Version
Scripting Support in GFv3 Prelude - Full VersionScripting Support in GFv3 Prelude - Full Version
Scripting Support in GFv3 Prelude - Full Version
 
G*なクラウド 雲のかなたに ショートバージョン
G*なクラウド 雲のかなたに ショートバージョンG*なクラウド 雲のかなたに ショートバージョン
G*なクラウド 雲のかなたに ショートバージョン
 
Grunt
GruntGrunt
Grunt
 
Grunt & Front-end Workflow
Grunt & Front-end WorkflowGrunt & Front-end Workflow
Grunt & Front-end Workflow
 
Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!
 
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
Let Grunt do the work, focus on the fun! [Open Web Camp 2013]
 
Npm scripts
Npm scriptsNpm scripts
Npm scripts
 
Workshop 3: JavaScript build tools
Workshop 3: JavaScript build toolsWorkshop 3: JavaScript build tools
Workshop 3: JavaScript build tools
 
Automated Performance Testing With J Meter And Maven
Automated  Performance  Testing With  J Meter And  MavenAutomated  Performance  Testing With  J Meter And  Maven
Automated Performance Testing With J Meter And Maven
 
Testing Drupal with Ghosts and Gherkin
Testing Drupal  with Ghosts and GherkinTesting Drupal  with Ghosts and Gherkin
Testing Drupal with Ghosts and Gherkin
 
Grunt - The JavaScript Task Runner
Grunt - The JavaScript Task RunnerGrunt - The JavaScript Task Runner
Grunt - The JavaScript Task Runner
 
Gradle - time for a new build
Gradle - time for a new buildGradle - time for a new build
Gradle - time for a new build
 
20091226 名古屋SGGAE/J勉強会発表資料『Lift on GAE/J』
20091226 名古屋SGGAE/J勉強会発表資料『Lift on GAE/J』20091226 名古屋SGGAE/J勉強会発表資料『Lift on GAE/J』
20091226 名古屋SGGAE/J勉強会発表資料『Lift on GAE/J』
 
Bundling Client Side Assets
Bundling Client Side AssetsBundling Client Side Assets
Bundling Client Side Assets
 
Yeoman Workflow
Yeoman WorkflowYeoman Workflow
Yeoman Workflow
 
2015 - Basta! 2015, DE: JavaScript und build
2015 - Basta! 2015, DE: JavaScript und build2015 - Basta! 2015, DE: JavaScript und build
2015 - Basta! 2015, DE: JavaScript und build
 
GlassFish Embedded API
GlassFish Embedded APIGlassFish Embedded API
GlassFish Embedded API
 
Automating Front-End Workflow
Automating Front-End WorkflowAutomating Front-End Workflow
Automating Front-End Workflow
 
JLPDevs - Optimization Tooling for Modern Web App Development
JLPDevs - Optimization Tooling for Modern Web App DevelopmentJLPDevs - Optimization Tooling for Modern Web App Development
JLPDevs - Optimization Tooling for Modern Web App Development
 

More from FITC

Cut it up
Cut it upCut it up
Cut it up
FITC
 
Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital Health
FITC
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript Performance
FITC
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech Stack
FITC
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR Project
FITC
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the Answer
FITC
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s Story
FITC
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday Innovation
FITC
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight Websites
FITC
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is Terrifying
FITC
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future Human
FITC
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)
FITC
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR Game
FITC
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare System
FITC
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product Design
FITC
 
The Power of Now
The Power of NowThe Power of Now
The Power of Now
FITC
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAs
FITC
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstack
FITC
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self Discovery
FITC
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time For
FITC
 

More from FITC (20)

Cut it up
Cut it upCut it up
Cut it up
 
Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital Health
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript Performance
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech Stack
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR Project
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the Answer
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s Story
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday Innovation
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight Websites
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is Terrifying
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future Human
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR Game
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare System
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product Design
 
The Power of Now
The Power of NowThe Power of Now
The Power of Now
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAs
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstack
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self Discovery
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time For
 

Recently uploaded

Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
Toptal Tech
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
uehowe
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
davidjhones387
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
3a0sd7z3
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
rtunex8r
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
Tarandeep Singh
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
wolfsoftcompanyco
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
k4ncd0z
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
ysasp1
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
Paul Walk
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
3a0sd7z3
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
xjq03c34
 
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
uehowe
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
Donato Onofri
 
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
fovkoyb
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
uehowe
 

Recently uploaded (16)

Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
 
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
 
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
 

Getting to Know Grunt By Writing Your Own Plugin

Editor's Notes

  1. workflow problem using Sass and Grunt (ruby + node) grunt-sass-version to ensure Sass version since it can't be directly managed by npm
  2. workflow problem using Sass and Grunt (ruby + node) grunt-sass-version to ensure Sass version since it can't be directly managed by npm
  3. you publishing a plugin isn’t the point I got a lot out of the process of building one that I’ve used in other projects and wanted to share I went into the process looking at these tools as black boxes and benefited from getting better understanding I want you to think about your tool and consider what you could get out of investigating them more deeply
  4. not that complicated really, 1-4 are just scaffolding, 5 is build, 6 is publish
  5. not that complicated really, 1-4 are just scaffolding, 5 is build, 6 is publish
  6. not that complicated really, 1-4 are just scaffolding, 5 is build, 6 is publish
  7. sounds a lot like Yeoman
  8. grunt-init is kind of replaced by Yeoman but both work point is that scaffolding projects is really useful but the tool isn’t that important grunt-init seems simpler but Yeoman has more community support
  9. *highlight grunt.loadTasks('tasks');* this is the line that actually includes your plugin code I don’t like “black magic” code where things happen because of naming convention etc…
  10. Start of my plugin this.options and this.data are how you talk to a plugin
  11. The options object is used to override the default value you identify in your plugin Any key/value pairs provided in the task get passed into this.data
  12. *collapse warnings* don’t need to go into too much detail here but a quick read makes it clear that this if file I/O maybe fine for your plugin but not for mine
  13. kind of trivial, but I always go looking for examples when I’m entering into an ecosystem a lot of plugins are file I/O so I needed something that wasn’t
  14. my plugin gets expected version generated regex for testing based on options runs `sass –v` to get available Sass version compares available version to regex and return result object
  15. need to include shelljs which means it’s a dependency for the module
  16. devDependencies are what you need when you `git clone` dependencies are what you need when you `npm install` peerDependencies are required for a plugin relationship
  17. don’t follow the order of this presentation think about testing with or before development, not after https://www.flickr.com/photos/catherinekolodziej/8866489274 I wish: https://www.flickr.com/photos/37423935@N00/10373620734
  18. included in scaffolding nice sanity check for your js make sure it’s checking all your js files
  19. *show clean, webu, nodeunit tasks and registering test task* scaffolded Gruntfile.js sets up way to run the plugin itself, identifies the tests, then created the test task
  20. scaffolded test/plugin_test.js runs tests against created output files using ‘fixtures’ and ‘expected’
  21. my tests call on _sass_version which is my library
  22. Catch-22 don’t want to publish module until it’s testing can’t test until published (at least with normal way of using npm)
  23. we can acquire dependencies by version number, tarball, git URL, or local path
  24. npm link creates a symbolic link to a local dependency
  25. Started as scratching my own itch Became about contributing to something bigger But ultimately was a powerful opportunity to “level up” my skills You can read the docs and browse the code but building something is the best way to learn