- create file
package.json
. - copy json and
postcss.config.js
in this gist to yourpackage.json
. npm install
to install all modules as listed inpackage.json:devDependencies
.npm run develop
for watch modes on pcss, ts, running server simultaneously.npm run build
for building source to result once.
Last active
May 21, 2022 10:32
-
-
Save automagisch/5c40da49c34b8af60effbafb1a1918ae to your computer and use it in GitHub Desktop.
TypeScript (client) + PostCSS + Serve with Concurrently
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "postcss-ts-serve-boilerplate", | |
"version": "1.0.0", | |
"description": "", | |
"main": "src/ts/main.ts", | |
"scripts": { | |
"postinstall": "npm run build", | |
"postcss": "postcss src/pcss/main.pcss --output dist/css/style.css --verbose", | |
"postcss:watch": "postcss src/pcss/main.pcss --output dist/css/style.css --verbose --watch", | |
"esbuild": "esbuild ./src/ts/*.ts --splitting --bundle --minify --format=esm --log-level=info --outdir=dist/js", | |
"esbuild:watch": "esbuild ./src/ts/*.ts --splitting --bundle --minify --format=esm --log-level=info --outdir=dist/js --watch", | |
"serve": "serve dist", | |
"develop": "concurrently \"npm run postcss:watch\" \"npm run esbuild:watch\" \"npm run serve\"", | |
"build": "concurrently \"npm run postcss\" \"npm run esbuild\"", | |
"test": "echo \"Error: no test specified\" && exit 1" | |
}, | |
"author": "", | |
"license": "ISC", | |
"devDependencies": { | |
"autoprefixer": "^10.4.7", | |
"concurrently": "^7.2.0", | |
"cssnano": "^5.1.8", | |
"dotenv": "^16.0.1", | |
"esbuild": "^0.14.1", | |
"postcss": "^8.4.12", | |
"postcss-cli": "^9.1.0", | |
"postcss-import": "^14.1.0", | |
"postcss-nested": "^5.0.6", | |
"serve": "13.0.2" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* PostCSS configuration file. This cfg is read by the postcss-cli command | |
* to build the command running all plugins and configs to keep the executable | |
* command as short and clear as possible. | |
* | |
* example used: https://www.sitepoint.com/postcss-sass-configurable-alternative/ | |
*/ | |
const { env } = require('dotenv').config(); | |
module.exports = cfg => { | |
const dev = (process.env === 'develop'); | |
return { | |
map: dev ? { inline: false } : false, | |
plugins: [ | |
require('autoprefixer')(), | |
require('postcss-import')(), | |
require('postcss-nested')(), | |
dev ? null : require('cssnano')() | |
] | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment