Submodule 11.3: Building the application

Introduction

In this submodule, you will learn to build a distribution folder containing the files that can be deployed on a web server hosting your project. This distribution folder would be built from your project files using various NPM packages and scripts. We will learn to:

• Clean out a folder using the clean NPM module.
• Copy files from one folder to another
• Prepare a minified and concatenated CSS file from all the CSS files used in your project
• Prepare an uglified and concatenated JS file containing all the JS code used in your project

See more: How to Use npm as a Build Tool

Open in the terminal your leChocolat folder to run the next commands.

Cleaning up a Distribution Folder

Install the rimraf npm module by typing the following at the prompt of your terminal:

npm install --save-dev rimraf

Then, set up in package.json the following script:

"clean": "rimraf dist",

Copying Fonts

Your project uses font-awesome fonts. These need to be copied to the distribution folder. To help us do this, we have installed the copyfiles NPM module globally using the command :

npm install copyfiles -g

So, set up in package.json the following script:

"copyfonts": "copyfiles -f node_modules/font-awesome/fonts/* dist/fonts",

Compressing and Minifying Images

We use the imagemin-cli NPM module to help us compress our images, to reduce the size of the images being used in our project. We have already Installed  the imagemin-cli module globally using the command:

npm install --global imagemin-cli

"imagemin": "imagemin images/* --out-dir dist/images",

0

Preparing the Distribution Folder I

Open .gitignore and update it as follows. We do not want the dist folder to be checked into the git repository.

node_modules
dist

Preparing the Distribution Folder II

Then, install the usemin-cli, cssmin, uglifyjs and htmlmin NPM packages as follows:

npm install --save-dev usemin-cli cssmin uglifyjs htmlmin

Then, set up in package.json the following scripts:

"usemin": "usemin contactus.html -d dist --htmlmin -o dist/contactus.html && usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html && usemin menu.html -d dist --htmlmin -o dist/menu.html && usemin index.html -d dist --htmlmin -o dist/index.html", 

 "build": "npm run clean && npm run imagemin && npm run copyfonts && npm run usemin"

Preparing the Distribution Folder III

Open index.html and surround the CSS links inclusion code as follows: 

<!-- build:css css/main.css -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link href="css/styles.css" rel="stylesheet">
<!-- endbuild -->

Do the same change in aboutus.html, menu.html and contactus.html

Preparing the Distribution Folder IV

Open index.html and surround the JS script inclusion code as follows: 

<!-- build:js js/main.js -->
 <script src="node_modules/jquery/dist/jquery.min.js"></script>
 <script src="node_modules/tether/dist/js/tether.min.js"></script>
 <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 <script src="js/scripts.js"></script>
 <!-- endbuild -->

Do the same change in aboutus.html, menu.html and contactus.html

Βuilding the distribution folder

Τo build the distribution folder, you can type the following at the prompt:

npm run build

This will build the dist folder containing the files that are a self-contained version of your project. You can now copy the contents of this folder to a web server that hosts your website.

Do a git commit

After verifying that the dist folder is built correctly, you can now do a git commit with the message "YourName's final Bootstrap project"