web app workflow with npm run

README.md

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

package.json

{
  "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"
  }
}