Why is my app missing assets after deploying project with NPM, missing icons/functionality after building?

I have been learning programming on and off for a few years now and finally decided to take a bootcamp and have been loving it. However, one drawback is we haven't really gotten into the meat of NPM and building/deploying our project using NPM, they only skimmed the surface.

I was able to easily build the project we worked on together, but after building my own site and using different packages/functionality, when I try to use my build script to send everything to my dist folder for deployment on my server I am missing some assets somewhere.

I am missing the following assets/functionality after building:

• Font awesome icons
• Slick carousel buttons and functionality

Here is my code:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="Specializing in hair and makeup services for weddings, senior pictures and formal events.">

    <!-- build:css css/main.css -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css"/>
    <link rel="stylesheet" href="/css/styles.css" />
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
    <!-- endbuild -->

    <!-- Google font package Robot Slab -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet">

    <title>Kaylee Derrick Hair and Makeup</title>
  </head>

  <body>
    <navbar class="navbar sticky-top navbar-expand-lg">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="images/logos/1transparentcropped.png" id="nav-logo"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fas fa-bars"></i>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#slider-div">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#services-div">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about-div">About Me</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#pricing-div">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact-me-div">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </navbar>
    
    <div class="photo-slider" id="slider-div">
      <div><img class="slider-img" src="images/works/weddings/wedding (1).JPG"></div>
      <div><img class="slider-img" src="images/works/weddings/wedding (2).JPG"></div>
      <div><img class="slider-img" src="images/works/weddings/wedding (3).JPG"></div>
    </div>

    <div class="row" id="services-div">
      <div class="col-12 text-center">
        <h1 class="mx-auto">Services</h1>
      </div>
      <div class="col-12 col-lg-3 ml-auto card-div">
        <div class="card mx-auto">
          <img class="card-img-top" src="images/icons/wedding-rings.png" alt="wedding image">
          <div class="card-body text-center">
            <h5 class="card-title">Weddings</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-3 mx-auto card-div">
        <div class="card mx-auto">
          <img class="card-img-top" src="images/icons/graduation-cap.png" alt="senior picture image">
          <div class="card-body text-center">
            <h5 class="card-title">Senior Pictures</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-3 mr-auto card-div">
        <div class="card mx-auto">
          <img class="card-img-top" src="images/icons/dress.png" alt="formal event picture">
          <div class="card-body text-center">
            <h5 class="card-title">Formal Events</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="row" id="about-div">
      <div class="col-10 col-lg-6 mx-auto my-auto text-center">
        <h1>About Me</h1>
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
      <div class="col-12 col-lg-6 text-center">
        <img src="images/kd.jpg" id="about-img">
      </div>
    </div>

    <div class="row" id="pricing-div">
      <div class="col-12 text-center">
        <h1 class="mx-auto">Pricing</h1>
      </div>
      <div class="col-12 col-lg-3 ml-auto card-div">
        <div class="card mx-auto">
          <div class="card-header text-center">
            <h3>Weddings</h3>
          </div>
          <div class="card-body">
            <ul>
              <li>Bridal Hair - $$$</li>
              <li>Bridal Makeup - $$$</li>
              <li>Bridesmaid Hair - $$$</li>
              <li>Bridesmaid Makeup - $$$</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-3 mx-auto card-div">
        <div class="card mx-auto">
          <div class="card-header text-center">
            <h3>Senior Pictures</h3>
          </div>
          <div class="card-body">
            <ul>
              <li>Bridal Hair - $$$</li>
              <li>Bridal Makeup - $$$</li>
              <li>Bridesmaid Hair - $$$</li>
              <li>Bridesmaid Makeup - $$$</li>
              <li>Bridal Party - Please contact for quote</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-3 mr-auto card-div">
        <div class="card mx-auto">
          <div class="card-header text-center">
            <h3>Formal Events</h3>
          </div>
          <div class="card-body">
            <ul>
              <li>Bridal Hair - $$$</li>
              <li>Bridal Makeup - $$$</li>
              <li>Bridesmaid Hair - $$$</li>
              <li>Bridesmaid Makeup - $$$</li>
              <li>Bridal Party - Please contact for quote</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="row" id="contact-me-div">
      <div class="col-12 col-lg-6 text-center">
        <h1>Contact Me</h1>
        <div class="row">
          <div class="col-12" id="contact-icon-div">
            <a href="tel:9032745133"><i class="fas fa-phone contact-icon"></i></a>
            <a href = "mailto:kayleederrickhmua@gmail.com"><i class="fas fa-envelope-open-text contact-icon"></i></a>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <form class="form-row" id="contact-form">
          <div class="form-group col-8 col-lg-4 ml-auto">
            <input type="text" class="form-control" id="name" placeholder="Name">
          </div>
          <div class="form-group col-8 col-lg-4 mr-auto">
            <input type="phone" class="form-control" id="phone" placeholder="Phone Number">
          </div>
          <div class="form-group col-8 col-lg-8 mx-auto">
            <input type="email" class="form-control" id="email" placeholder="Email">
          </div>
          <div class="form-group col-8 col-lg-8 mx-auto">
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Enter message here"></textarea>
          </div>
          <div class="form-group col-12 text-center">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>
      </div>
    </div>

    <div class="row" id="footer-div">
      <div class="col-12 col-lg-6 text-center my-auto">
        Copyright &copy; 2021 LD Web Design
      </div>
      <div class="col-12 col-lg-6 text-center">
        <a href="https://www.facebook.com/kayleederrickhairandmakeup"><i class="fab fa-facebook"></i></a>
        <a href="https://www.instagram.com/kayleederrickhairandmakeup"><i class="fab fa-instagram"></i></a>
        <a href="tel:9032745133"><i class="fas fa-phone"></i></a>
        <a href = "mailto:kayleederrickhmua@gmail.com"><i class="fas fa-envelope-open-text"></i></a>
      </div>
    </div>

    <!-- build:js js/main.js -->
    <script src="node_modules/jquery/dist/jquery.slim.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 type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script src="js/scripts.js"></script>
    <!-- endbuild -->
  </body>
</html>

CSS

body {
  overflow-x: hidden !important;
  font-family: 'Amatic SC', cursive; }

.navbar {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background-color: white; }
  .navbar .navbar-brand {
    margin-left: 15%; }
  .navbar .navbar-nav {
    margin-right: 15%; }
  .navbar a {
    color: black; }

#nav-logo {
  width: 150px; }

@media screen and (max-width: 992px) {
  #nav-logo {
    width: 100px; }
  .navbar-brand {
    margin-left: 15%;
    margin-top: 5px; }
  .navbar-toggler {
    margin-right: 15%;
    color: black;
    font-size: 20px; }
  .navbar-nav {
    margin: 0 0 0 0 !important;
    align-items: center; } }

.slick-slide {
  margin: 0 15px 0 15px; }

.slider-img {
  max-height: 65vh; }

#services-div {
  padding: 10px 0 10px 0; }
  #services-div .card {
    max-width: 15vw;
    border: none;
    background-color: transparent; }
  @media screen and (max-width: 992px) {
    #services-div .card-div {
      padding: 15px 0 15px 0; }
    #services-div .card {
      max-width: 50vw; } }

#about-div {
  padding: 10px 0 10px 0; }

#about-img {
  height: 85vh; }

#pricing-div {
  padding: 10px 0 10px 0; }
  #pricing-div .card {
    max-width: 20vw;
    border: none;
    background-color: transparent; }
    #pricing-div .card .card-header {
      background-color: transparent;
      border: none; }
  @media screen and (max-width: 992px) {
    #pricing-div .card-div {
      padding: 15px 0 15px 0; }
    #pricing-div .card {
      max-width: 50vw; } }

#contact-me-div #contact-icon-div {
  text-align: center;
  margin-top: 5%;
  margin-bottom: 5%; }

#contact-me-div .contact-icon {
  font-size: 50px;
  padding: 20px;
  color: black; }

#contact-me-div .btn {
  background-color: black;
  border-color: black; }
  #contact-me-div .btn :hover {
    background-color: black;
    border-color: black; }

@media screen and (max-width: 992px) {
  #contact-me-div .form-group {
    margin-left: auto;
    margin-right: auto; } }

#footer-div {
  background-color: #ddaf94;
  margin-bottom: 0; }

i {
  color: black;
  font-size: 30px;
  padding: 20px; }

JS

$(function () {
  // slick slider script
  $('.photo-slider').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true,
    centerPadding: "15px",
    adaptiveHeight: true
  });
});

package.JSON

{
  "name": "hamsite",
  "version": "1.0.0",
  "description": "This is a website for hair and makeup servies by Kaylee Derrick",
  "main": "index.html",
  "scripts": {
    "build": "npm run clean && npm run imagemin && npm run copyfiles && npm run usemin",
    "clean": "rimraf dist",
    "copyfiles": "copyfiles -f slick/fonts/* dist/fonts && copyfiles -f node_modules/@fortawesome/fontawesome-free/webfonts/* dist/fonts",
    "imagemin": "imagemin images/* -o dist/images && imagemin images/logos/* -o dist/images/logos && imagemin images/works/* -o dist/images/works && imagemin images/works/formals/* -o dist/images/works/formals && imagemin images/works/seniors/* -o dist/images/works/seniors && imagemin images/works/weddings/* -o dist/images/works/weddings && imagemin images/icons/* -o dist/images/icons",
    "lite": "lite-server",
    "scss": "node-sass -o css/ css/",

    "start": "npm run watch:all",
    "test": "echo \"Error: no test specified\" && exit 1",
    "usemin": "usemin index.html -d dist -o dist/index.html",
    "watch:scss": "onchange \"css/*.scss\" -- npm run scss",
    "watch:all": "parallelshell \"npm run watch:scss\" \"npm run lite\""
  },
  "author": "Logan Derrick",
  "license": "ISC",
  "devDependencies": {
    "copyfiles": "^2.2.0",
    "imagemin-cli": "^6.0.0",
    "lite-server": "^2.5.4",
    "node-sass": "^4.14.1",
    "onchange": "^7.0.0",
    "parallelshell": "3.0.1",
    "rimraf": "^3.0.2",
    "usemin-cli": "^0.6.0"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",
    "bootstrap": "^4.5.2",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1"
  }
}

Could someone help me better understand what I need to add to my package file and/or edit in my code to make this work?