npm Starter Workflow with Browser Sync, SASS compiler, etc.

Thank you to Stephanie Eckles and Kevin Powell for this workflow. I’ve simply modified their work for my own personal use and the purpose of this post is for my own future reference.

As the package.json description says:
“SASS compile|autoprefix|minimize and live-reload dev server using Browsersync for static HTML”

1. Create a new directory on your local machine and open it with VS Code.
2. Ensure that npm is installed by running npm -v in the terminal.
3. Create a ‘src’ folder within your new project folder.
4. Create an ‘index.html’ file within the ‘src’ folder and add the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alex Winter</title>
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
    <div>
        <p>Test!</p>
    </div>
</body>
</html>

Create an ‘scss’ folder within the ‘src’ folder, and then an ‘app.scss’ file within this new folder. Then add the following:

body {
    margin: 0;
    background-color: black;
    color: yellow;
}

div {
    width: min(100vw - 2em, 62em);
    margin-inline: auto;
    text-align: center;
    background-color: grey;
}

Create a ‘package.json’ file within the root of your new project folder and add the following:

{
    "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": "Alex Winter",
    "scripts": {
      "build:sass": "sass  --no-source-map src/scss:public/css",
      "copy:assets": "copyfiles -u 1 ./src/assets/**/* public",
      "copy:html": "copyfiles -u 1 ./src/*.html public",
      "copy": "npm-run-all --parallel copy:*",
      "watch:assets": "onchange \"/src/assets/**/*\" -- npm run copy:html",
      "watch:html": "onchange \"src/*.html\" -- npm run copy:html",
      "watch:sass": "sass  --no-source-map --watch src/scss: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"
    }
  }

Create a ‘.gitignore’ file within the root of your new project folder and add the following:

node_modules/
public/

Within the VS Code Terminal, ensure that you are in the root of your new project folder and run
npm install

After a successful install, run the following within the Terminal each time you wish to begin working:
npm start

September 19, 2022