Skip to content

Instantly share code, notes, and snippets.

@felixdorner
Last active December 25, 2022 15:00
Show Gist options
  • Save felixdorner/278fa705aa37cb369a809a4151c7d701 to your computer and use it in GitHub Desktop.
Save felixdorner/278fa705aa37cb369a809a4151c7d701 to your computer and use it in GitHub Desktop.
Example workflow: NPM scripts to process PostCSS while watching files, starting a server and syncing with the browser.
{
"name": "Example",
"version": "0.0.1",
"description": "Example workflow",
"author": "You <you@youremail.com>",
"license": "MIT",
"postcss": {
"plugins": {
"postcss-easy-import": {},
"postcss-preset-env": {
"stage": "0",
"browsers": "defaults",
"features": {
"custom-properties": false
},
"preserve": false
},
"postcss-clean": {
"keepSpecialComments": "1"
}
}
},
"scripts": {
"css": "postcss assets/postcss/style.css -o assets/css/style.css",
"watch": "onchange 'assets/postcss/**/*.css' -- npm-run-all css",
"build": "npm-run-all css",
"browsersync": "browser-sync start --server --files 'assets/css/style.css'",
"prestart": "npm-run-all css",
"start": "npm-run-all --parallel watch browsersync"
},
"devDependencies": {
"browser-sync": "latest",
"npm-run-all": "latest",
"onchange": "latest",
"postcss": "latest",
"postcss-clean": "latest",
"postcss-cli": "latest",
"postcss-easy-import": "latest",
"postcss-preset-env": "latest"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment