Advanced front-end automation with npm scripts

Advanced front-end automation with npm scripts

• 1.
  Advanced front-end automation
 withnpm scripts @k88hudson Mozilla
• 2.
  <3 @brycebaril @dark_rost_ruth
• 3.
  Who writes codefor browsers?
• 4.
  I love browsers
• 5.
  I hate buildtools
• 6.
  “Systems tend togrow, and as they grow, they encroach”
 “Systems tend to expand to fill the known universe.” —John Gall, The Systems Bible
• 7.
  The more complexand 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 advantageof 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: transpilees2015, 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 thenpm script environment better at dealing with our problems?
• 16.
  You already usenode, npm
• 17.
  npm run package.json usage
• 18.
  npm run package.json usage
• 19.
  npm run environment nodeexecutables via npmshell $PATH {npm lifecycle
• 20.
  bash/cmd.exe -> goodat: 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 automatedsystem takes advantage of the
 natural interface presented by its component parts
• 25.
  Plugins add anextra layer
• 26.
  Most tools alreadyhave a cli browserify webpack mocha lessc joshing eslint sass uglifyjs svgo karma
• 27.
  Browserify “browserify -d -treactify ./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 nodeexecutables via npmshell $PATH {npm lifecycle
• 33.
  Lifecycle scripts
• 34.
  npm install npm publish npmversion
• 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": "npmrun test && npm run build”, "postversion": "npm publish && git push --tags" }
• 37.
  pre- and post- npmrun potato > prepotato SO HUNGRY > potato mashing... done. > postpotato YUM YUM
• 38.
  A good automatedsystem breaks down complex things into simple, composable things
• 39.
  http://www.infoq.com/presentations/Simple-Made-Easy “Simple Made Easy”
• 40.
  Components of anautomated 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 thetrade offs?
• 48.
  Simpler mental modelsinstead of performance.
• 49.
  Less code, butless extensible
• 50.
  Shell scripting isstill hard, especially maintaining cross-compatibility with Windows.
• 51.
  We need tobuild more tools, a
 set of common “recipes”… and more?
• 52.
  What can youdo? - 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 andscript! Show me what you build @k88hudson