Introduction to Pug (formerly known as Jade)

Pug is a powerful and expressive templating language commonly used in web development to generate HTML markup. It is known for its concise and clean syntax, making it a popular choice among developers for creating dynamic web content. Pug was formerly known as Jade, but the name was changed to Pug to avoid trademark issues with another software.

Key Features of Pug
Getting Started with Pug
Basic Syntax
Using Pug as a Template in Web Frameworks

Key Features of Pug:

Indentation-based Syntax: Pug uses indentation to define the structure of your HTML code, making it visually appealing and easy to read. Unlike traditional HTML with a lot of angle brackets and closing tags, Pug's syntax focuses on indentation for nesting elements.
Variables and Control Structures: Pug supports variables and control structures like conditionals and loops, making it easy to generate dynamic content in your templates.
Includes and Mixins: Pug allows you to create reusable components using includes and mixins, which can significantly reduce code duplication in your projects.
Filters: Pug includes filters for processing text, such as Markdown and CoffeeScript, directly within your templates.
Extensibility: Pug is highly extensible, allowing you to create custom filters, plugins, and middleware to suit your specific project needs.

Getting Started with Pug

To start using Pug in your web development projects, follow these steps:

Installation of Pug CLI: To compile Pug templates into HTML directly from the command line, you'll need to install the Pug Command Line Interface (CLI). Install it globally using npm:
```
npm install -g pug-cli
```
This installation provides you with the pug command, enabling you to compile Pug files from any directory on your system.
Creating a Pug File: Create a .pug file for your HTML template. For example, create a file named your-template.pug and start writing your Pug code.
Compiling Pug to HTML: To compile your Pug file into HTML, use the pug command:
```
pug your-template.pug
```
To watch the file for changes and automatically recompile it with pretty-printed HTML output, combine the -w and -P options:
```
pug -w your-template.pug -P
```
This command will monitor your-template.pug for changes, automatically recompile it upon saving, and format the output HTML in a readable manner.
Including Compiled HTML in Your Project: Once your Pug file is compiled into HTML, include the generated HTML file in your web project.
Integrating with Build Tools: For larger projects, integrate Pug into your build process with tools like Gulp and Webpack to automate Pug template conversion to HTML.

Note

While pug-cli is useful for command-line operations, you can also include pug as a local dependency in specific Node.js projects by running npm install pug within your project directory. This is particularly useful when integrating Pug with web frameworks and build tools.

Basic Syntax

Pug uses indentation to define structure, making templates very readable. Here's an example:

html
  head
    title My Pug Page
  body
    h1 Welcome to Pug!
    p This is a simple example of Pug templating.
    ul
      - for(let i = 1; i <= 5; i++)
        li Item #{i}

This compiles to:

<!DOCTYPE html>
<html>
  <head>
    <title>My Pug Page</title>
  </head>
  <body>
    <h1>Welcome to Pug!</h1>
    <p>This is a simple example of Pug templating.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </body>
</html>

Using Pug as a Template in Web Frameworks:

Pug is a popular choice for templating within various web frameworks. Here's how you can use it with some common web frameworks:

1. Express.js (Node.js):

Pug is the default templating engine for Express.js, a popular Node.js web framework. To use Pug in Express.js:

Install Pug as a dependency in your Express.js project:
```
npm install pug
```

Set Pug as the view engine in your Express app:

const express = require('express');
const app = express();

// Set Pug as the view engine
app.set('view engine', 'pug');

Create Pug templates in a views directory and render them in your routes:

app.get('/', (req, res) => {
  res.render('index', { title: 'My Express App' });
});

2. Vue.js:

Pug can also be used in Vue.js for writing concise and clean templates. You'll need a build setup that supports Pug compilation. Here's a simplified example of using Pug in a Vue.js single-file component:

<template lang="pug">
  .my-component
    h1 Hello from Vue.js and Pug!
    p This is a Vue.js component with Pug template.
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

In this example, the <template> section uses Pug to define the component's HTML structure.

3. Angular (with AngularJS):

Although Pug is not natively supported in Angular, you can use it alongside AngularJS (Angular 1.x) if you prefer Pug's syntax. You'll need a build tool like Gulp or Webpack to compile Pug templates into HTML, which can then be used in your AngularJS application.

// Example Gulp task to compile Pug templates
gulp.task('pug', function () {
  return gulp.src('src/templates/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('dist'));
});

This Gulp task compiles Pug templates from the src/templates directory to HTML files in the dist directory.

4. Programmatic Usage in Node.js:

Install Pug in your Node.js project:
```
npm install pug
```

Compile Pug templates to a function:

const pug = require('pug');
const compiledFunction = pug.compileFile('template.pug');

Render HTML using the compiled function:

const html = compiledFunction({ /* your data here */ });

This approach allows you to dynamically compile templates or integrate Pug into larger Node.js applications, offering versatility across various development scenarios.

promto-c/Pug_Template_Example_and_Introduction.md

Select an option

No results found