Minimum Static Site Setup with Sass

What are you using to build sites these days? For myself, all of my personal projects now use the static site generator Eleventy (check out my resources for that on 11ty.Rocks).

But before that, I briefly used Gulp due to being in a team environment and dealing with cross-environment concerns. It was also a pre-build step before manually copying files into the custom WordPress theme directory. Let's just say it took me several years to understand the purpose of task runners/build tools!

Before I found Eleventy (aka 11ty), I worked out a command line combination for building a static site that included processing Sass and running the final files through autoprefixer and cssnano.

If you don't need any templating languages and just need to get a simple site built plus Sass, use this as the contents of a fresh package.json:

{
  "name": "project",
  "version": "0.1.0",
  "description": "SASS compile|autoprefix|minimize and live-reload dev server using Browsersync for static HTML",
  "main": "public/index.html",
  "author": "5t3ph",
  "scripts": {
    "build:sass": "sass  --no-source-map src/sass:public/css",
    "copy:html": "copyfiles -u 1 ./src/*.html public",
    "copy": "npm-run-all --parallel copy:*",
    "watch:html": "onchange 'src/*.html' -- npm run copy:html",
    "watch:sass": "sass  --no-source-map --watch src/sass:public/css",
    "watch": "npm-run-all --parallel watch:*",
    "serve": "browser-sync start --server public --files public",
    "start": "npm-run-all copy --parallel watch serve",
    "build": "npm-run-all copy:html build:*",
    "postbuild": "postcss public/css/*.css -u autoprefixer cssnano -r --no-map"
  },
  "dependencies": {
    "autoprefixer": "^10.4.2",
    "browser-sync": "^2.27.7",
    "copyfiles": "^2.4.1",
    "cssnano": "^5.0.17",
    "npm-run-all": "^4.1.5",
    "onchange": "^7.1.0",
    "postcss-cli": "^9.1.0",
    "sass": "^1.49.8"
  }
}

This does not include support for moving assets like images, but you could duplicate the copy:html and watch:html scripts as a basis to include other assets.

Note: at the time of publishing, browser-sync had an unresolved issue with an old dependency, but since you will not deploy browser-sync as a production dependency, it is low impact.

src/
- sass/
- - style.scss
- index.html

1. npm start - copies src files to public and starts Browsersync server at localhost:3000
2. npm run build - copies files to public and autoprefixes/minifies css

If you do need templating or want to write your content in Markdown as well as use Sass, then you might enjoy my Eleventy starter - 11ty Sass Skeleton starter.