argyleink / shortstack Goto Github PK

View Code? Open in Web Editor NEW

165.0 5.0 20.0 907 KB

🥞 minimal Rollup + PostCSS modern syntax starter template

Home Page: https://shortstacks.netlify.com

CSS 28.90% HTML 14.08% JavaScript 57.02%

bundler rollup babel babel-preset-env postcss postcss-preset-env

shortstack's Introduction

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

Clone Shortstack into a new folder

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

OR (essentially the same thing with npx+degit)

npx degit argyleink/shortstack#main

Install tools and spin it up

npm i
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.

shortstack's People

Contributors

Stargazers

Watchers

shortstack's Issues

Ensure all npm commands work across platforms

npm start works, but npm run build doesnt. should be minor updates to the package json scripts.

consider purgecss

https://github.com/FullHuman/postcss-purgecss

run during dev or only for prod builds?

add HTML minifier to prod build

build server

the dev server is great for dev, but comes with scroll syncing "ghost mode" and other socket related features, that shouldnt be on for a production hosted build.

example / estimated command:
browser-sync start --server 'dist' --no-open --no-ghost-mode --no-notify

can't decide if this should provide them or not. crunching for prod usually takes a bit of custom work and i'm happy letting me or other folks add that feature when they're ready and meeting the requirements/budgets that they've set at a project level. thoughts!?

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-methods",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

    "@babel/core": "^7.8.0",
    "@babel/plugin-proposal-class-properties": "^7.8.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.8.0",
    "@babel/plugin-proposal-private-methods": "^7.8.0",
    "rollup-plugin-babel": "^4.3.3",

import babel from 'rollup-plugin-babel'

babel() in plugins

Why

i dont always need it, and what it adds is usually aesthetic mostly.. but can be good for modern authoring and transformed bundles (if needed). could just keep this here for reference too..