This document discusses using npm scripts for front-end automation and builds. It argues that npm scripts provide a simple, cross-compatible way to automate tasks like bundling, transpiling, testing and deployment without additional build tools. Npm scripts take advantage of existing CLI tools and allow decomposing complex automation into simple, composable tasks through lifecycle scripts and npm-run-all. Some tradeoffs are less extensibility and ongoing challenges with cross-platform support, but the approach aims to provide simpler mental models than alternative build systems.

1. Advanced front-end automation
with npm scripts
@k88hudson
Mozilla

2. <3 @brycebaril @dark_rost_ruth

3. Who writes code for browsers?

4. I love browsers

5. I hate build tools

6. “Systems tend to grow, and as they grow, they encroach”
“Systems tend to expand to fill the known universe.”
—John Gall, The Systems Bible

7. 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

9. 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:

10. Why npm scripts?

11. npm scripts =
shell + node + npm =
magic

13. 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.

14. Let’s dive in!

15. Why is the npm script environment
better at dealing with our problems?

16. You already use node, npm

17. npm run
package.json usage

18. npm run
package.json usage

19. npm run environment
node executables via npmshell $PATH
{npm lifecycle

20. bash/cmd.exe -> good at:
File i/o
Chaining tasks
Running tasks in series/parallel

21. Cross-compatible!
rutabaga input.js | uglifyjs > output.js
tomato && cucumber && cauliflower

22. bash / node
cat / catw
mkdir / mkdirp
rm / rimraf
& / npm-run-all —parallel

23. npm run: $PATH
Works!

24. A good automated system takes advantage of the
natural interface presented by its component parts

25. Plugins add an extra layer

26. Most tools already have a cli
browserify
webpack
mocha
lessc
joshing
eslint
sass
uglifyjs
svgo
karma

27. Browserify
“browserify -d -t reactify ./entry.js -o ./output.js”

28. 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']);
};

30. Webpack

32. npm run environment
node executables via npmshell $PATH
{npm lifecycle

33. Lifecycle scripts

34. npm install
npm publish
npm version

35. npm version patch -m "Upgrade to %s for lolz"
> commit 522d0 “Upgrade to v0.0.1 for lolz”
> new tag v0.0.1

36. "scripts": {
"preversion": "npm run test && npm run build”,
"postversion": "npm publish && git push --tags"
}

37. pre- and post-
npm run potato
> prepotato
SO HUNGRY
> potato
mashing...
done.
> postpotato
YUM YUM

38. A good automated system breaks down
complex things into simple, composable things

39. http://www.infoq.com/presentations/Simple-Made-Easy
“Simple Made Easy”

40. 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.

41. Baseline

42. Sub-tasks

43. Sub-tasks with npm-run-all

44. Name-spaced sub-tasks

45. Complete example

47. What are the trade offs?

48. Simpler mental models instead of
performance.

49. Less code, but less extensible

50. Shell scripting is still hard, especially
maintaining cross-compatibility with Windows.

51. We need to build more tools, a
set of common “recipes”… and more?

52. 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

53. Go forth and script!
Show me what you build @k88hudson