Getting Started with Gulp.js and Bootstrap Using the Create-Gulp-BS-Template Package

Introduction

Gulp.js is a powerful task runner that automates repetitive tasks like minification, compiling SCSS, and optimizing images. When combined with Bootstrap 5, it creates a seamless development workflow. The create-gulp-bs-template package simplifies this process, providing a pre-configured setup for quick project initialization.

In this tutorial, we will guide you through setting up and using this template to streamline your development.

Why Use Gulp with Bootstrap?

• Automated Workflow: Gulp automates tasks such as compiling SCSS, minifying CSS/JS, and optimizing images.
• Live Reloading: With BrowserSync, changes in your project are instantly reflected in the browser.
• Easy Build Management: Switch between development and production environments with simple commands.
• Modular SCSS Support: Write clean, maintainable styles with SCSS.

Prerequisites

Before you start, ensure you have the following installed on your system:

1. Node.js (v14.x or above)
2. npm (Node Package Manager)

You can check your installation by running:

node -v
npm -v

Step 1: Installing the Template

To create a new project using the create-gulp-bs-template package, run:

npx create-gulp-bs-template my-bootstrap-project

Replace my-bootstrap-project with your desired project name. Then, navigate into the project folder:

cd my-bootstrap-project

Next, install the required dependencies:

npm install

Step 2: Running the Development Server

Start the local development server with live reloading:

npm start

This command will:
✅ Launch a local server using BrowserSync
✅ Watch for changes in SCSS, JavaScript, and HTML files
✅ Automatically reload the browser when files are modified

Step 3: Understanding the Project Structure

Here’s an overview of the project directory:

|── dist/               # Compiled project files
├── src/                # Source files
│   ├── scss/           # SCSS stylesheets
│   ├── js/             # JavaScript files
│   ├── images/         # Image assets
├── gulpfile.js         # Gulp tasks configuration
├── package.json        # Project dependencies and scripts
└── README.md           # Project documentation

• src/ – Contains all your source files. SCSS, JavaScript, and images are stored here.
• dist/ – The compiled output after running the build process.

Step 4: Available Gulp Commands

The template provides several useful commands:

Start Development Mode

npm start

• Runs the local server with live reloading.

Watch for Changes in Development

npm run dev

• Watches for file changes and recompiles SCSS/JS automatically.

Build for Production (Without Minification)

npm run prod

• Generates the production build but keeps CSS and JavaScript files unminified for debugging.

Build for Production (With Minification)

npm run prodm

• Generates a fully optimized and minified production build.

Step 5: Customizing SCSS and JavaScript

Editing SCSS Styles

All SCSS files are located in src/scss/. Modify the style.scss file to update your website’s design. To compile the styles, simply run:

npm run dev

Adding JavaScript Functionality

Custom JavaScript files are stored in src/js/. You can add your scripts here, and Gulp will process them automatically.

Step 6: Deploying Your Project

Once you're satisfied with your design, build the project for deployment:

npm run prodm

The optimized output will be available in the dist/ folder, ready for deployment.

Conclusion

Using the create-gulp-bs-template package, you can quickly set up a Bootstrap 5 project with Gulp.js, automating repetitive tasks and boosting productivity. Whether you're a beginner or an experienced developer, this setup ensures an efficient development workflow.