Skip to content

Instantly share code, notes, and snippets.

@mattdesl
Last active August 29, 2015 14:17
Show Gist options
  • Save mattdesl/b6990e7c7221c9cc05aa to your computer and use it in GitHub Desktop.
Save mattdesl/b6990e7c7221c9cc05aa to your computer and use it in GitHub Desktop.
web app workflow with npm run

npm run scripts to handle the following:

  • LESS for CSS pre-processor
  • browserify for npm dependencies
  • watchify for fast incremental bundling
  • LiveReload browser refresh on bundle change
  • LiveReload CSS injection on *.less change
  • budo to serve port 9966 and bring together some of the above tasks
  • babelify for ES6 -> ES5
  • errorify to show syntax errors in the browser during development
  • compress JavaScript and CSS for compressed production release

tasks:

  • npm run start for development on http://localhost:9966/
  • npm run prod for production release

folder structure:

cool-web-app/
  package.json
  index.js
  app/
    index.html
    bundle.js
    main.css
  src/
    less/
      main.less
    foo.js
{
"name": "cool-web-app",
"version": "1.0.0",
"description": "a really cool web app",
"main": "index.js",
"devDependencies": {
"babelify": "^6.0.2",
"browserify": "^9.0.3",
"budo": "^4.0.0",
"errorify": "^0.2.4",
"garnish": "^2.1.3",
"less": "^2.4.0",
"less-plugin-clean-css": "^1.5.0",
"onchange": "^1.0.0",
"parallelshell": "^1.1.1",
"tape": "^3.5.0",
"uglify-js": "^2.4.17"
},
"scripts": {
"start": "parallelshell \"npm run less:watch\" \"npm run build:watch\"",
"build": "browserify index.js -t babelify | uglifyjs -cm > app/bundle.js",
"build:watch": "budo index.js:bundle.js --live --dir app -t babelify -p errorify | garnish",
"less": "lessc src/less/main.less > app/main.css",
"less:compress": "lessc src/less/main.less --clean-css > app/main.css",
"less:watch": "onchange 'src/less/**/*.less' -- npm run less",
"prod": "npm run build && npm run less:compress"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment