SlideShare a Scribd company logo
Advanced front-end automation

with npm scripts
@k88hudson
Mozilla
<3 @brycebaril @dark_rost_ruth
Who writes code for browsers?
I love browsers
I hate build tools
“Systems tend to grow, and as they grow, they encroach”

“Systems tend to expand to fill the known universe.”
—John Gall, The Systems Bible
The more complex and self-sufficient the
automated system, the more difficult it
will be understand and operate.
The Paradoxes and Ironies of Automation, David Wentzel. 

http://www.davewentzel.com/content/paradoxes-and-ironies-automation
Advanced front-end automation with npm scripts
1. Takes advantage of the natural interface presented

by its component parts;
2. Breaks down complex things into simple,

composable things;
3. Makes compromises intentionally, not
circumstantially
Your system can win, if it:
Why npm scripts?
npm scripts =
shell + node + npm =
magic
Advanced front-end automation with npm scripts
npm scripts can:
transpile es2015, transpile jsx, minify/optimize code, optimize svgs, copy,
rename and move files, compile css via a pre-processor, add autoprefixing,
source maps for js/css development, build Android and Firefox OS apps from
source with cordova, run unit tests, run code linting, run style checking,
run test coverage reporting, deploy releases, run watch for developer
environment and live reload dev server, etc. etc. etc.
in twenty lines or less, with zero plugins.
Let’s dive in!
Why is the npm script environment
better at dealing with our problems?
You already use node, npm
npm run
package.json usage
npm run
package.json usage
npm run environment
node executables via npmshell $PATH
{npm lifecycle
bash/cmd.exe -> good at:
File i/o
Chaining tasks
Running tasks in series/parallel
Cross-compatible!
rutabaga input.js | uglifyjs > output.js
tomato && cucumber && cauliflower
bash / node
cat / catw
mkdir / mkdirp
rm / rimraf
& / npm-run-all —parallel
npm run: $PATH
Works!
A good automated system takes advantage of the

natural interface presented by its component parts
Plugins add an extra layer
Most tools already have a cli
browserify
webpack
mocha
lessc
joshing
eslint
sass
uglifyjs
svgo
karma
Browserify
“browserify -d -t reactify ./entry.js -o ./output.js”
module.exports = function(grunt) {
grunt.initConfig({
browserify: {
options: {
debug: true,
transform: ['reactify']
},
files: {
'./output.js': './entry.js'
}
},
});
grunt.loadNpmTasks('grunt-browserify');
grunt.registerTask('default', ['browserify']);
};
Advanced front-end automation with npm scripts
Webpack
Advanced front-end automation with npm scripts
npm run environment
node executables via npmshell $PATH
{npm lifecycle
Lifecycle scripts
npm install
npm publish
npm version
npm version patch -m "Upgrade to %s for lolz"
> commit 522d0 “Upgrade to v0.0.1 for lolz”
> new tag v0.0.1
"scripts": {
"preversion": "npm run test && npm run build”,
"postversion": "npm publish && git push --tags"
}
pre- and post-
npm run potato
> prepotato
SO HUNGRY
> potato
mashing...
done.
> postpotato
YUM YUM
A good automated system breaks down
complex things into simple, composable things
http://www.infoq.com/presentations/Simple-Made-Easy
“Simple Made Easy”
Components of an automated system are simple

when they have a single, well-defined objective.


Good complex tasks are composed

of well-defined simple ones.
Baseline
Sub-tasks
Sub-tasks with npm-run-all
Name-spaced sub-tasks
Complete example
Advanced front-end automation with npm scripts
What are the trade offs?
Simpler mental models instead of
performance.
Less code, but less extensible
Shell scripting is still hard, especially
maintaining cross-compatibility with Windows.
We need to build more tools, a

set of common “recipes”… and more?
What can you do?
- Try it out, talk about what’s hard
- Work on cross-platform bugs
- Share your recipes
- File bugs or help improve npm docs
Go forth and script!

Show me what you build @k88hudson

More Related Content

Similar to Advanced front-end automation with npm scripts (20)

Large-scaled Deploy Over 100 Servers in 3 Minutes
Large-scaled Deploy Over 100 Servers in 3 Minutes
Hiroshi SHIBATA
 
Zenoss: Buildout
Zenoss: Buildout
Jeffrey Clark
 
Continuous Delivery with Maven, Puppet and Tomcat - ApacheCon NA 2013
Continuous Delivery with Maven, Puppet and Tomcat - ApacheCon NA 2013
Carlos Sanchez
 
Automated Penetration Testing With The Metasploit Framework
Automated Penetration Testing With The Metasploit Framework
Tom Eston
 
S&T What I know about Node 110817
S&T What I know about Node 110817
Dan Dineen
 
Automation of Active Directory's Deployments on AWS
Automation of Active Directory's Deployments on AWS
Devoteam Revolve
 
Intro To Node.js
Intro To Node.js
Chris Cowan
 
PuppetDB: Sneaking Clojure into Operations
PuppetDB: Sneaking Clojure into Operations
grim_radical
 
Our Puppet Story (Linuxtag 2014)
Our Puppet Story (Linuxtag 2014)
DECK36
 
Large Scale Crash Dump Analysis with SuperDump
Large Scale Crash Dump Analysis with SuperDump
Christoph Neumüller
 
Zotonic presentation Erlang Camp Boston, august 2011
Zotonic presentation Erlang Camp Boston, august 2011
Arjan
 
Front end development gurant
Front end development gurant
marwa Ayad Mohamed
 
Infrastructure as code - Python Saati #36
Infrastructure as code - Python Saati #36
Halil Kaya
 
Ganeti Web Manager: Cluster Management Made Simple
Ganeti Web Manager: Cluster Management Made Simple
OSCON Byrum
 
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
Is Antipov
 
Intro to Node.js (v1)
Intro to Node.js (v1)
Chris Cowan
 
DevOpsDaysRiga 2017: Dmitry Buzdin - Delivery Pipeline for Windows Machines
DevOpsDaysRiga 2017: Dmitry Buzdin - Delivery Pipeline for Windows Machines
DevOpsDays Riga
 
Delivery Pipeline for Windows Machines
Delivery Pipeline for Windows Machines
Dmitry Buzdin
 
Continuous Delivery: The Next Frontier
Continuous Delivery: The Next Frontier
Carlos Sanchez
 
Intro To webOS
Intro To webOS
fpatton
 
Large-scaled Deploy Over 100 Servers in 3 Minutes
Large-scaled Deploy Over 100 Servers in 3 Minutes
Hiroshi SHIBATA
 
Continuous Delivery with Maven, Puppet and Tomcat - ApacheCon NA 2013
Continuous Delivery with Maven, Puppet and Tomcat - ApacheCon NA 2013
Carlos Sanchez
 
Automated Penetration Testing With The Metasploit Framework
Automated Penetration Testing With The Metasploit Framework
Tom Eston
 
S&T What I know about Node 110817
S&T What I know about Node 110817
Dan Dineen
 
Automation of Active Directory's Deployments on AWS
Automation of Active Directory's Deployments on AWS
Devoteam Revolve
 
Intro To Node.js
Intro To Node.js
Chris Cowan
 
PuppetDB: Sneaking Clojure into Operations
PuppetDB: Sneaking Clojure into Operations
grim_radical
 
Our Puppet Story (Linuxtag 2014)
Our Puppet Story (Linuxtag 2014)
DECK36
 
Large Scale Crash Dump Analysis with SuperDump
Large Scale Crash Dump Analysis with SuperDump
Christoph Neumüller
 
Zotonic presentation Erlang Camp Boston, august 2011
Zotonic presentation Erlang Camp Boston, august 2011
Arjan
 
Infrastructure as code - Python Saati #36
Infrastructure as code - Python Saati #36
Halil Kaya
 
Ganeti Web Manager: Cluster Management Made Simple
Ganeti Web Manager: Cluster Management Made Simple
OSCON Byrum
 
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
Is Antipov
 
Intro to Node.js (v1)
Intro to Node.js (v1)
Chris Cowan
 
DevOpsDaysRiga 2017: Dmitry Buzdin - Delivery Pipeline for Windows Machines
DevOpsDaysRiga 2017: Dmitry Buzdin - Delivery Pipeline for Windows Machines
DevOpsDays Riga
 
Delivery Pipeline for Windows Machines
Delivery Pipeline for Windows Machines
Dmitry Buzdin
 
Continuous Delivery: The Next Frontier
Continuous Delivery: The Next Frontier
Carlos Sanchez
 
Intro To webOS
Intro To webOS
fpatton
 

Recently uploaded (20)

War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
June Patch Tuesday
June Patch Tuesday
Ivanti
 
Crypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdf
Stephen Perrenod
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
Analysis of the changes in the attitude of the news comments caused by knowin...
Analysis of the changes in the attitude of the news comments caused by knowin...
Matsushita Laboratory
 
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
Edge AI and Vision Alliance
 
Artificial Intelligence in the Nonprofit Boardroom.pdf
Artificial Intelligence in the Nonprofit Boardroom.pdf
OnBoard
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
AmirStern2
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
June Patch Tuesday
June Patch Tuesday
Ivanti
 
Crypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdf
Stephen Perrenod
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
Analysis of the changes in the attitude of the news comments caused by knowin...
Analysis of the changes in the attitude of the news comments caused by knowin...
Matsushita Laboratory
 
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
Edge AI and Vision Alliance
 
Artificial Intelligence in the Nonprofit Boardroom.pdf
Artificial Intelligence in the Nonprofit Boardroom.pdf
OnBoard
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
AmirStern2
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Ad

Advanced front-end automation with npm scripts