Create a JavaScript project from SCRATCH

How to compile sass and js

Photo by Start Digital on Unsplash

It was so long that I didn’t create an HTML project from scratch, and I forgot how to start it? How should I compile the SCSS file to CSS? How should I minimize the JS? How was to start watching the changes?
So I decided to summarize my investigation and put them all here for reference!

Pre-requisites

You need Node.js installed on your computer.

If you’re on a Mac, I recommend installing Homebrew, a package manager for mac.

After installing this, you can install Node.js by doing:

$ brew install node

If you want more details on installing Node.js, check out this article from Treehouse.

Let’s begin

First, we need to create our folder structure, open the terminal and, create a new folder for our project.

$ mkdir PROJECT && cd PROJECT

We need three folders inside our project:
- public
— css
— js
— images
- scss

$ mkdir public scss && mkdir public/css public/js public/images

• public folder is where I keep all my static assets, inside I have css, js and images folders.
• scss folder is where I like to keep all of my scss files directories.

Next, we need to start the npm for compiling the JS and SCSS files:

npm init

After running this command, it will ask you some questions about your project like name, version, author, etc.

now let’s create some files:

$ touch scss/main.scss .gitignore public/index.html

• main.scss is where we will write all styles code.
• (optional) .gitignore is a hidden file we use to tell GitHub what files and folders to exclude from our repo. I like to ask GitHub to ignore my node_modules folder. If I or anyone else needs to clone my repo, I usually ask them to npm install based on the packages in package.json.
• index.html is where we will write all markup codes.

Folder structure and files (VSCode with theme Aura Soft Dark)

Sass compiler and watcher

There are many ways to do this, and I found some of the easiest ones from a great article.

Watch & Compile your Sass with npm.

Let’s install the dev dependencies:

$ npm install -D node-sass nodemon css-minify

• -D flag is another way of saying, “write these node_modules into my package.json under devDependencies” (go look at your package.json)
• node-sass is that thing gulp-sass uses to compile your scss files to css files. node-sass wraps Libsass.
• nodemon is a thing we’ll use to watch for changes on our scss files. Normally, it’s used to watch for changes on your server-side Node.js code.
• css-minify is a lib for css-compression command-line tool

Now it’s time to write some Sass codes to be able to compile it. 😬
Add the following codes to your main.scss file:

$grey: #ccc
body {
  background-body: $grey;
  padding: 0;
  margin: 0;
}

Great! We can create our scripts to compile this sass file to a css one. Put the following script inside your package.json file at the script section:

"scripts": {
   "build-css": "node-sass --include-path scss scss/main.scss   public/css/main.css",
   "minify-css": "css-minify -d public/css -o public/css",
},

For executing this command, you need to do this in your terminal:

$ npm run build-css && npm run minify-css

Now you can see the compiled code at main.css and main.min.css files inside the public/css folder. Awesome!

There is a problem with this script: you should run this command every time you change your sass codes to compile it again, and it doesn’t have a good experience. So we should update our scripts and add the following watch command to the package.json file:

"watch-css": "nodemon -e scss -x \"npm run build-css && npm run minify-css\""

Now let’s try this command in the terminal

$ npm run watch-css

Now you can edit your main.scss file and watch the main.css and main.min.css that will change whenever any changes are submitted. Whoaaa!

Add CSS to HTML

Our css files are ready to be added to the HTML header part. Before adding CSS, we need to create our HTML body structure.

Let’s make your index.html file like the above file and change the “PAGE TITLE” with your desired title for your page.

Now let’s link the CSS file to the index.html file.

<link href="./css/main.min.css" rel="stylesheet" />

Add the above line inside the <head> tag in the index.html file below the <title> tag.

Serve project

To serve the local project to work in the web browser, we can use a serve library. Run the following command in the terminal to install the serve

$ npm install -g serve

Now for running the project with serve you can run this command in the terminal:

$ serve -s public

Then it will show you the port that the project is running on, then you can open it in your favorite browser! 🤩

Uglify JS

It sounds weird, yes!

UglifyJS is a JavaScript parser, minifier, compressor and beautifier toolkit.

We need this tool for minimizing the JavaScript codes size to reduce the loading time of the webpage. Let’s add it to our project:

$ npm install -D uglify-js 

For using this powerful tool following command should be added to the scripts in package.json file:

"compress-js": "uglifyjs public/js/index.js -c -o public/js/index.min.js"

• The first argument is the input and if you have multiple JS files you can put all of them together there.
• -c is standing as compress
• -o is used for the output file and the following file name is the file name of the output.

Wire the JS to the HTML

Now it’s time to add the compressed JS file to the HTML file. For this purpose it needs to add the following tag at the end of the <body> tag inside the index.html file:

<script src="./js/index.min.js"></script>

There is a lot of things that can be added to this tutorial but I think it should be simple to be useful!

Anyway, thanks for reading.

Photo by Howie R on Unsplash