Pug nā€™ Roll

one pug rocking out on the drums

It's easy to fall in love with pug.js at first sight - minimal syntax & powerful template inheritance are features everyone can adore šŸ’• To keep our coats nice and shiny for the future, here's a guide on all the pug basics (not all pug features are mentioned here!)

If you're looking for an in-depth tutorial, check out my past post to learn pug.js with pugs.

If you wanna ride with the pugs right now, codepen is a great place to start! Just select the gear icon in your pen's HTML pane then switch up the HTML preprocessor to pug.

Pugpen of Contents:

Pug & Gulp

  var gulp = require('gulp'),
    pug = require('gulp-pug'),
    cached = require('gulp-cached'),
    changed = require('gulp-changed'),
    pugInheritance = require('gulp-pug-inheritance');

gulp.task('pug-pages', function() {

  return gulp.src([
    'pug/pages/**/*.pug',
    '!pug/pages/**/_*.pug'
  ])
    .pipe(changed('./', {
      extension: '.html'
    }))
    .pipe(cached('pug'))
    .pipe(pugInheritance({
      basedir: 'pug/pages',
      skip: 'node_modules'
    }))
    .pipe(pug({
      locals: {},
      pretty: true
    }))
    .pipe(gulp.dest('./'));

});

Syntax

  doctype html
html
  head
    meta(
      name="Pugcupid"
      content="Wiggle with love"
    )
  body
    main#page
      .spotlight
        h2.title Pugcupid Festival
    script(src="script.js")

Variables

  //- Assignment
- var stringVariable = 'String'
- var integerVariable = 10
- var arrayVariable = ['Pug', 'Dancer', 'Cake']
- var objectVariable = { name: 'Lancelot' }

//- Concatentation
- var combinedVariable = 'Pug' + stringVariable

Interpolation

  - var title = 'Pug Smootie'
- var star = 'Prime Minister Pugadorian'

h2= title
p #{star} is heading to the US!

Iterations

  each value in arrayVariable
  p= value

each value in ['Pug Life', 'Pugspace', 'Pug Blues']
  p= value

each value, index in ['Pug Riding', 'Pug Aliens']
  p= index + ': ' + value

while x < 10
  p= x
  x++

Conditionals

  if pugLaunch
  h2 This pug launched into space
else if pugBattle
  h2 This pug is engaged in battle
else if !pugBreak
  h2 Yo you ain't on a pug break, dug
else
  h2 Warning! This pug is jumping through logic!

Mixins

  //- Declaration
mixin pugQuote
  blockquote As a pug, I often live the high life. Peeps look at me and think, "Dang brah, I need to beef my badonk like that mafa right there". Shoot they fo jels and that's just the kibble on the bits for me.
  cite Prince Diggity

//- Usage
+pugQuote

//- Declaration with parameters
mixin pugUser(name, age)
  h2= name
  if age
    h3= age

//- Usage with parameters
+pugUser('Bubbles', 2)

Includes

  //- Include another pug file
include ./path-to/file.pug

//- Include other file types as plain text
include styles.css
include script.js

Extends & Blocks

  //- template.pug
block data
  - var pageTitle = "Pugcupid"
html
  head
    title= pageTitle
  body
    block ribbon
    block content
      p Pugs fo life


  //- page.pug
//- Extends template.pug
extends ./path-to/template.pug

block data
  - var pageTitle = "Pudome"

block ribbon
  p New pug jazz

block content
  p This wipes out "Pugs fo life"

Pugspace of Contents:

That's all for now, everyone!

I'd love to hear how you all use pug on a day to day basis. Drop a comment down below and let's get this cheat sheet really cookin!


3,457 0 59