argyleink/shortstack

CSS

PostCSS to bundle, import from NPM, local or remote URLs, plus postcss-preset-env for latest CSS features.

JS

Rollup to bundle, treeshake, import from NPM, local or remote URLs, import processed CSS, plus babel-preset-env for latest JS features.

Servers

Browsersync with all the goodies for local dev: live reload, hot swap CSS, scroll syncing, remote debugging, etc. Prod server is just a static server.

Watch me break it down on YouTube!

Getting Started

use this as a Github template

OR

Clone Shortstack into a new folder

1. mkdir new-project-name && cd $_
2. git clone --depth=1 https://github.com/argyleink/shortstack.git . && rm -rf ./.git

OR (essentially the same thing with npx+degit)

1. npx degit argyleink/shortstack#main

Install tools and spin it up

1. npm i
2. npm start

Development

Running npm start runs Browsersync, Rollup and Postcss concurrently, watching changes to your files in ./app and refreshes connected browsers.

Production

Running npm run build compiles and minifies your code in app and outputs the optimised result to a folder called dist that's ready for static hosting.

Running npm run production will build your project and start a server at dist.