Brewnbeer

A full life cycle agency

Follow publication

treamlining Frontend Development with Gulp and Pug 🚀

Aditya Sutar
Brewnbeer
Published in
3 min readOct 23, 2023

A few weeks back, I encountered remarkable websites applauded by industry authorities like Awwwards, GSAP, and ThreeJS. These sites seamlessly integrated animations and videos, leaving me captivated and curious about the developers’ methods.

This curiosity sparked a quest to uncover their techniques. It was evident that it wasn’t just about visuals; it was about precise multimedia handling. My discovery of the html-boilerplate repository on GitHub, crafted by Cuberto, shed light on template engines. It became apparent that certain agencies employed this approach to fashion truly exceptional websites.

In the dynamic realm of front-end development, efficiency, and organization are paramount. Here, Gulp and Pug step in as a potent combination set to revolutionize your workflow. Gulp, a robust task runner, partners with Pug, an elegant template engine, to streamline front-end development, enhancing speed, maintainability, and overall enjoyment.

In this guide, we’ll walk you through automating your web project with Gulp and Pug, maximizing your development potential.

Prerequisites

Before we start, make sure you have the following installed:

  • Node.js version 10.0.0 or later
  • IDE (VS CODE)

Installation

1. Create a New Project Directory
Open your terminal and execute the following commands:

mkdir my-project
cd my-project

2. Initialize Node.js
Next, initialize Node.js by running:

npm init -y

This sets up a new Node.js project with a default package.json file.

3. Installing Gulp
A gulp is a fundamental tool for automating tasks in your project. Install it globally:

npm install -g gulp 

Additionally, save it as a development dependency in your project:

npm install --save-dev gulp

4. Setting Up Gulpfile.js
Create a file named gulpfile.js in your project root. This file will contain the configuration and tasks for Gulp.

const gulp = require(‘gulp’);

// Define your tasks here

5. Installing Pug
Now, let’s install the Pug template engine:

npm install --save-dev gulp-pug

This package allows Gulp to process Pug files.

6. Configuring Gulp for Pug
In your gulpfile.js, require the gulp-pug module and set up a task to compile Pug files:

const pug = require('gulp-pug');

gulp.task('pug', () => {
return gulp.src('src/*.pug')
.pipe(pug())
.pipe(gulp.dest('dist'));
});

This task takes Pug files from the src directory compiles them, and outputs the HTML files to the dist directory.

7. Running the Gulp Task
In your terminal, run the task using the command:

gulp pug

8. Running the Gulp Build Task

gulp build

That’s great progress! Now, let’s continue with the next sections of the article. Here’s the next section:

Creating Pug Templates

Now that we have our project set up with Gulp and Pug, it’s time to dive into creating Pug templates. Pug offers an elegant and concise syntax for writing HTML templates. Let’s go through the steps:

Basic Pug Structure
Create a new directory named src within your project. Inside src, create a file named index.pug

html
head
title Streamlined Frontend Development
body
h1 Welcome to Gulp and Pug

This simple Pug template will render to the following HTML:

<html>
<head>
<title>Streamlined Frontend Development</title>
</head>
<body>
<h1>Welcome to Gulp and Pug</h1>
</body>
</html>

Using Variables in Pug
Pug allows us to use variables to dynamically generate content. Update your index.pug file:

- const pageTitle = "Streamlined Frontend Development"
html
head
title= pageTitle
body
h1 Welcome to Gulp and Pug

Now, pageTitle is a variable that can be dynamically changed.

Using Mixins
Mixins are reusable blocks of code. Create a mixin in index.pug:

mixin link(href, text)
a(href=href)= text

+link('https://www.example.com', 'Visit Example')

This will render an anchor tag with the provided href and text

Conclusion

With Gulp and Pug, you’ve unlocked a powerful combination to streamline your front-end development process. The automation and templating capabilities they provide can significantly enhance your workflow, making your projects faster and more maintainable.

And guess what? You’re in luck! I’ve already crafted a Gulp and Pug boilerplate that we use at Brewnbeer. You can find it here. Feel free to clone and adapt it to kickstart your own projects.

Happy coding, and may your web development journey be as seamless as the experiences you’ve admired!

Brewnbeer
Brewnbeer
Aditya Sutar
Aditya Sutar

Written by Aditya Sutar

Building Flutter Jobs (flutterjobs.in) | Co-founder and Managing Director at Brewnbeer

No responses yet

Write a response