Build css via npm scripts

package.json

…
  "scripts": {
    "copy-assets": "rm -rf public/assets/{fonts,images}; rsync -a app/assets/{fonts,images} public/assets",
    "__autoprefix": "script/css/autoprefix",
    "clean-css": "rm -rf public/assets/stylesheets",
    "build-css": "script/css/build-css",
    "watch-css": "chokidar 'app/assets/stylesheets/backend/**/*.scss' -c 'npm run build-css'",
    "serve": "script/css/serve",
    "dev": "run-p copy-assets clean-css build-css watch-css serve"
  },
…

  "devDependencies": {
    …
    "autoprefixer": "^7.1.1",
    "browser-sync": "^2.18.12",
    "chokidar-cli": "^1.2.0",
    "node-sass-chokidar": "0.0.3",
    "npm-run-all": "^4.0.2",
    …    
  }

script_css_autoprefix

#!/bin/bash

# Run postcss autoprefixer on compiled CSS
postcss public/assets/stylesheets/*.css --use autoprefixer -d vendor/assets/stylesheets

script_css_build-css

#!/bin/bash

# Compile SCSS files
# Currently the script only takes into account backend styles.
node-sass-chokidar app/assets/stylesheets/backend.scss --output public/assets/stylesheets --source-map-embed --source-map-contents --include-path vendor/assets/stylesheets

# Change Sprockets asset url helpers (which aren't processed by libsass)
# into real CSS url paths.
# This is a workaround to make assets available in CSS npm flow.
# Currently the script only takes into account backend styles.
sed -i '' 's/font-url[(]\"/url("..\/fonts\//g;s/image-url[(]\"/url("..\/images\//g' public/assets/stylesheets/backend.css

script_css_serve

#!/bin/bash

# Starts a browser-sync server for local style injection on source change.
#
# Due to a limitation in browser-sync subdomain suppport, in this script
# iteration, the organization name is hardcoded. Change it according to
# your needs.
browser-sync start --proxy 'winterfell.lvh.me:3000' --port 3001 --files public/assets/stylesheets