HTML Parcel Build
So far in this series, we have looked at the benefits of using a Boilerplate to streamline your workflow, and a two articles on how to setup a React Boilerplate with parcel instead of Webpack. In this article we will explore a proposed workflow instead of traditional means to compile and bundle a traditional HTML/SCSS project using Parcel.
TLTR: Want to just view the source code? Check out the article repository.
So, lets look at a beginning project:
- Create a project directory:
cdinto the directory.
- Create an starting page:
srcdirectory. So create them like so:
mkdir -p src/js src/styles
Include the following into the
content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<p>Be <b>bold</b> in stating your key points. Put them in a list: </p>
<li>The first item in your list</li>
<li>The second item; <i>italicize</i> key words</li>
<p>Improve your image by including an image. </p>
<p><img src="https://placekitten.com/200/300" alt="A Great HTML Resource"></p>
<p>Add a link to your favorite <a href="https://www.dummies.com/">Web site</a>.
Break up your page with a horizontal rule or two. </p>
<p>Finally, link to <a href="https://chucksmith.dev">my Portfolio Site</a>. </p>
<!-- And add a copyright notice.-->
<p>© Eclectic Coding, 2020</p>
This is the opinionated section. I prefer to use a 7-in-1 SCSS structure which creates a more modular experience, and is easier to maintain. You can access my Sass Boilerplate and import into the project.
The browser does not understand SCSS files so they need to be compiled and there are a few different ways to accomplish this. First we need to add a package to our project. There are two different packages you can use: sass, Dart Sass, the primary implementation of Sass, which means it gets new features before any other implementation. Or node-sass, which is the package we will use.
First, we need to generate a
package.json file. I will use
yarn but you can use your preferred package manager:
yarn init -y. The package should look similar to this (note: I have expanded the author object):
"name": "Chuck Smith",
Now install node-sass as a development package:
yarn add -D node-sass.
The SCSS structure uses SCSS partials which are called in
src/styles/main.scss file. So, to compile into a main stylesheet. We issue the following command from inside the project directory:
node-sass stylesheets/main.scss dist/main.css
We need to add a link to the new stylesheet in the head of our
<link rel="stylesheet" href="main.css">
So when you reload the page you will see an immediate change as styles are applied. In this case, a different font, a padding of 3rem all around, and font-size of 20px.
The problem is when we make changes to the SCSS partials and we have to recompile. The node-sass package does have a watch switch, but I have often found it not very robust:
node-sass -w stylesheets/main.scss dist/main.css
We need to install Parcel:
yarn add -D parcel@next.
We need to add a few scripts to our
"name": "Chuck Smith",
"start": "parcel index.html --port 3000 --open",
"dev": "npm run clean && npm run start",
"build": "parcel build src/index.html",
"clean": "rm -rf ./.cache ./dist"
When we run
yarn start script, parcel creates a
dist/ directory, compiles the
index.html, and creates bundles in the new `dist directory.
Update the SCSS stylesheet link. In the earlier implementation, we pointed to a compiled stylesheet, but by pointing to a :
<link rel="stylesheet" href="src/styles/main.scss">
Parcel compiles everything and places the new bundle in the
dist directory including hot reloading any changes to the html of styling.
If you have a main JS file, add a
script tag in your HTML document pointing to your JS file. Parcel will bundle that as well.
BOOM! That's it.