Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
SASS compile|autoprefix|minimize and browser-sync server for static HTML
Project Structure:
- css/ (generated by node-sass)
- sass/
- - style.scss
- index.html
npm run develop - copies src files to dist/ and starts server with live reload
npm run build - copies files to dist/ and autoprefixes/minifies css
"name": "project",
"version": "0.1.0",
"description": "SASS compile|autoprefix|minimize and live-reload dev server for static HTML",
"main": "dist/index.html",
"author": "5t3ph",
"scripts": {
"scss": "node-sass src/sass/style.scss src/css/style.css",
"css": "postcss src/css/style.css -u autoprefixer cssnano -r",
"copy:css": "copyfiles -u 1 ./src/css/* dist",
"copy:html": "copyfiles -u 1 ./src/*.html dist",
"copy": "npm run copy:css && npm run copy:html",
"watch:html": "onchange 'src/*.html' -- npm run copy:html",
"watch:sass": "node-sass --watch src/sass src/sass/*/ -o dist/css",
"watch": "npm run watch:html | npm run watch:sass",
"serve": "browser-sync start --server dist --files dist",
"develop": "npm run copy && npm run watch | npm run serve",
"build": "npm run copy:html && npm run scss && npm run css && npm run copy:css"
"dependencies": {
"autoprefixer": "^9.5.0",
"browser-sync": "^2.26.3",
"copyfiles": "^2.1.0",
"cssnano": "^4.1.10",
"node-sass": "^4.11.0",
"onchange": "^5.2.0",
"postcss-cli": "^6.1.2"
"browserslist": [
"last 2 versions"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.