package.json

{
  "name": "www",
  "version": "1.0.0",
  "description": "www",
  "main": "index.html",
  "author": "_",
  "license": "MIT",
  "repository": "_",
  "browserslist": ["last 2 versions"],
  "scripts": {
    "start": "yarn watch",
    "clean": "rm -rf dist",
    "watch": "NODE_ENV=dev yarn compile:all && yarn serve && yarn watch:all",
    "watch:all":
      "utils/watch yarn watch:html & yarn watch:css & yarn watch:js & wait",
    "watch:js": "utils/watch ./scripts/ 'yarn compile:js'",
    "watch:css": "utils/watch ./styles/ 'yarn compile:css'",
    "watch:html": "utils/watch ./pages/ 'yarn compile:html'",
    "compile": "NODE_ENV=production yarn compile:all",
    "compile:all": "yarn compile:js & yarn compile:css & yarn compile:html",
    "compile:js":
      "mkdir -p dist/ && babel ./scripts/index.js --out-file dist/scripts.js",
    "compile:css":
      "mkdir -p dist/ && postcss ./styles/index.css -o ./dist/styles.css -c postcss.config.js",
    "compile:html": "mkdir -p dist/ && pug ./pages/*.pug --out ./dist/",
    "serve": "browser-sync start --server --ss dist/ --files dist/ --xip"
  },
  "dependencies": {
    "autoprefixer": "^8.4.1",
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "postcss-cli": "^5.0.0",
    "postcss-import": "^11.1.0",
    "postcss-preset-env": "^4.0.0",
    "pug-cli": "^1.0.0-alpha6"
  },
  "devDependencies": {
    "pug": "^2.0.3"
  }
}

postcss.config.js

module.exports = ctx => ({
  map: false,
  parser: false,
  plugins: {
    'postcss-import': {},
    'autoprefixer': {},
    'postcss-preset-env': {
      stage: 1,
    },
  },
});

watch.sh

#!/bin/bash
#
# This script will watch a directory, and execute an arbitrary
# command when there is a change to a file within it.
#
# @param $1: The directory to watch for any changes
# @param $2: The command to run when there is a change
##################################################

current_md5=""
previous_md5=""

traverse_directory() {
    for file in $(ls $1); do
        local file_path="$1/$file"
        if [[ -f "$file_path" ]]; then
            current_md5+=$(md5 "$file_path")
        else
            traverse_directory "$file_path"
        fi
    done
}

while true; do
    traverse_directory "$1"
    if [[ $previous_md5 != "" ]]; then
        if [[ "$current_md5" != "$previous_md5" ]]; then
            $2
        fi
    fi
    previous_md5="$current_md5"
    current_md5=""
    sleep .5
done