Gulp

We are using Gulp to automate some tasks like CSS minification, SCSS to CSS conversion, PNG/JPG to WebP conversion, files renaming, and moving from one folder to another.

Working With Gulp

When you customize this theme, you’ll find a partials folder within the /src folder. This folder contains reusable sections like testimonial.html and components like blog-card.html, service-card.html, and pricing-card.html.

Gulp-file-include

We used gulp-file-include to conditionally include data when calling it within HTML files. Here are some examples:

Blog Card Example

blog-card-1.html

<div class="blog-item" data-aos="fade-up" data-aos-delay="200">
  <div class="row g-4 align-items-center justify-content-between">
    <div class="col-lg-5">
      <div class="blog-left-content">
        <div class="post-meta">
          <span>
            <span>@@category</span>
            . @@date
          </span>
        </div>
        <h3 class="h4">
          <a href="blog-details.html">@@title</a>
        </h3>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="blog-right-content">
        <p>@@description</p>
        <a
          href="blog-details.html"
          class="btn-sm btn-circle-black centered btn-animated btn-animated-t-right"
        >
          <i
            class="material-symbols-rounded btn-animated-child-visible btn-animated-child float-none"
          >
            call_made
          </i>
          <i
            class="material-symbols-rounded btn-animated-child-invisible btn-animated-child float-none"
          >
            call_made
          </i>
        </a>
      </div>
    </div>
  </div>
</div>

index.html

<section class="blog-section padding pb-0">
  <div class="container">
    <div class="row">
      <div class="col-lg-10 col-xl-7 mx-auto">
        <div
          class="section-heading text-center mb-64"
          data-aos="fade-up"
          data-aos-delay="400"
        >
          <div class="sub-heading">LATEST BLOG INSIGHT</div>
          <h2>Our Tips And Solutions In Technology Services</h2>
        </div>
      </div>
      <div class="col-12">
        <!-- prettier-ignore -->
        @@loop('components/blog-card-1.html',[{
          "title": "10 Tips For Choosing An IT Support Provider In NYC",
          "description": "There are many variations of passages of Lorem Ipsum available, but the majority have suffered some slightly believable. If you are going",
          "date": "25 January, 2023",
          "category": "News"
        },{
          "title": "Navigating IT Challenges: A Guide to Managed Services",
          "description": "Explore the myriad solutions available to address your IT challenges. Uncover the best strategies for seamless technology integration and support.",
          "date": "25 January, 2023",
          "category": "News"
        },{
          "title": "Strategic IT Support: Your Roadmap to Efficient Business Operationsq",
          "description": "Discover the keys to strategic IT support that goes beyond the basics. Learn how tailored solutions can optimize your business operations effectively.",
          "date": "25 January, 2023",
          "category": "News"
        },{
          "title": "Maximizing Productivity: IT Solutions Tailored for Your Business Needs",
          "description": "Unlock the potential of your business with personalized IT solutions. Dive into effective strategies for maximizing productivity and staying ahead in the digital age.",
          "date": "25 January, 2023",
          "category": "News"
        },{
          "title": "Beyond the Basics: Advanced IT Services for a Competitive Edge",
          "description": "Elevate your business with advanced IT services that go beyond the ordinary. Explore cutting-edge solutions designed to give you a competitive edge in the market.",
          "date": "25 January, 2023",
          "category": "News"
        }])
      </div>
    </div>
  </div>
</section>
<!--blog-section-->

Logo Example

logo.html

<a href="index.html">
  <img
    loading="lazy"
    src="@@if(context.footer_logo){./images/logo-footer.png}@@if(!context.footer_logo){./images/logo.png}"
    width="@@if(context.width){@@width}@@if(!context.width){140}"
  />
</a>

header-layout-1.html

<header id="main-header" class="header header-1">
  <div class="top-header top-header-primary"></div>
  <!-- /.top-header -->
  <div class="primary-header">
    <div class="container">
      <div class="primary-header-inner">
        <!-- /.side-menu-icon-wrap -->
        <div class="header-logo">@@include('./components/logo.html')</div>
        <!-- /.header-logo -->
        <div class="header-menu-wrap collapse" id="collapse-menu-primary"></div>
        <!-- /.header-menu-wrap -->
        <div class="header-right"></div>
        <!-- /.header-right -->
      </div>
      <!-- /.primary-header-inner -->
    </div>
  </div>
  <!-- /.primary-header -->
</header>
<!-- /.Main Header -->

header-layout-2.html

<header id="main-header" class="header header-2">
  <div class="top-header top-header-secondary"></div>
  <!-- /.top-header -->
  <div id="primary-header" class="primary-header">
    <div class="container">
      <div class="primary-header-inner">
        <div class="header-logo">@@include('./components/logo.html')</div>
        <!-- /.header-logo -->
        <div class="header-menu-wrap collapse" id="collapse-menu-primary"></div>
        <!-- /.header-menu-wrap -->
        <div class="header-right"></div>
        <!-- /.header-right -->
      </div>
      <!-- /.primary-header-inner -->
    </div>
  </div>
  <!-- /.primary-header -->
</header>
<!-- /.Main Header -->

footer-layout-1.html

<section class="widget-section-2 padding">
  <div class="container">
    <div class="widget-top text-lg-center" data-aos="fade-up">
      @@include('components/logo.html',{"footer_logo":true,"width": 200})
      <h2>
        our vertical solutions expertise allows your business to streamline
        workflow, and increase productivity.
      </h2>
    </div>
  </div>
</section>
<!-- ./ widget-section -->

<footer class="footer-section"></footer>

footer-layout-2.html

<section class="widget-section padding pt-0">
  <div class="container">
    <!-- prettier-ignore -->
    @@include('contact-us.html')

    <div class="row">
      <div class="col-lg-3 col-md-6 sm-padding">
        <div class="widget-item item-1" data-aos="fade-up" data-aos-delay="400">
          @@include('components/logo.html',{"footer_logo":true,"width": 200})
          <p class="desc">
            Duis aute irure dolor in cilum eu fugiat nulla pariatur. Excepteur
            non proident, sunt in culpa qui officia mollit anim id est laborum.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- ./ widget section -->

<footer class="footer-section"></footer>

Gulp Automated Tasks

When you run any command defined in the package.json scripts, such as npm run dev, npm run preview, npm run deploy, or npm run download, multiple automated Gulp tasks are triggered. These tasks include:

In following, we’ve focused on the most important tasks you’ll need to know when customizing this theme. To know about more tasks, please check gulpfile.js.

SCSS Compilation Tasks:

1. Compiling Main SCSS:

   • This task is triggered by all commands defined in the package.json scripts.
   • It converts the style.scss file located at src/scss/style.scss to style.css.
   • The compiled CSS file is then moved to the theme/css/style.css directory.

2. Compiling Bootstrap SCSS:

   • This task is also triggered by all commands defined in the package.json scripts.
   • It converts the bootstrap.scss file located at src/scss/bootstrap/bootstrap.scss to a minified version named bootstrap.min.css.
   • The minified Bootstrap CSS file is then moved to the theme/vendors/bootstrap/bootstrap.min.css directory.
   • Additionally, the contents of bootstrap.min.css are dynamically prepended to the theme/vendors/index.min.css file.

Webp Image Conversion:

To improve performance, we’ve reduced the size of all images while maintaining lossless quality. This means the image quality remains intact, but the file size is smaller.

1. Converting src/images folder images

   • This task is triggered by npm run preview and npm run deploy commands.
   • It converts all png jpg jpeg image to webp.
   • Then its move converted webp images to theme/images folder.