NPM Scripts setup (WIP)

README.md

NPM scripts

A quick example of using NPM scripts instead of, say, Gulp. Google "NPM scripts as a build tool" or something to read more.

• Autoprefixes, CSS Vars, reduced-Calc, Imports, etc with postcss
• Compress CSS with cssnano
• Lint CSS with cssnano
• Lint JS with XO (ESlint)
• Minify SVG with svgo
• Minify JS with uglify-js
• Minify images with imagemin
• …and automagically serve and refresh all this with browser-sync

1. create a ./static/src/js/**/*.js, ./static/src/css/**/*.css
2. run npm install
3. try: npm run lint:css, npm run build:css, npm run build, npm run serve, etc. (view Package.json)

package.json

{
  "name": "NOPE",
  "version": "1.0.0",
  "description": "NOPE",
  "main": "index.html",
  "config": {
    "files": {
      "css": {
        "in": "static/src/css/index.css",
        "out": "static/dist/css/index.min.css"
      }
    }
  },
  "scripts": {
    "clean": "rm -r static/dist/*",
    "test": "tap test/*.js",
    "lint:js": "xo",
    "lint:css": "stylelint 'static/src/css/**/*.css'; exit 0",
    "lint": "npm run lint:js && npm run lint:css",
    "serve": "browser-sync start --files='static/dist/**/*.html,static/dist/js/**/*.js,static/dist/css/**/*.css' --server 'static/dist'",
    "build:css": "postcss -c postcss.config.json",
    "build:js": "echo 'TODO'",
    "build": "npm run lint && npm run clean && npm run build:css && npm run build:js",
    "watch:css": "onchange 'static/src/css/**/*.css' -- npm run build:css",
    "watch:js": "onchange 'static/src/js/**/*.js' -- npm run build:js",
    "watch": "npm-run-all --parallel serve watch:*"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://NOPE.com.git"
  },
  "keywords": [
    "NOPE"
  ],
  "author": "David Hund",
  "license": "ISC",
  "bugs": {
    "url": "https://NOPE/issues"
  },
  "homepage": "https://NOPE.com#README",
  "devDependencies": {
    "autoprefixer": "^6.4.1",
    "browser-sync": "^2.16.0",
    "cssnano": "^3.7.5",
    "imagemin-cli": "^3.0.0",
    "npm-run-all": "^3.1.0",
    "onchange": "^3.0.2",
    "postcss-calc": "^5.3.1",
    "postcss-cli": "^2.6.0",
    "postcss-custom-properties": "^5.0.1",
    "postcss-import": "^8.1.2",
    "postcss-reporter": "^1.4.1",
    "sanitize.css": "^4.1.0",
    "stylelint": "^7.3.1",
    "svgo": "^0.7.0",
    "uglify-js": "^2.7.3",
    "xo": "^0.16.0"
  }
}