Menu

Pug (ex. Jade)

August 16, 2017 - HTML

Pug Documentation
Pug Cli

Setup

npm init
npm install gulp --save-dev
npm install gulp-pug --save-dev
npm install rename --save-dev

Gulpfile.js

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


gulp.task( 'html', function () {
    gulp.src( 'src/pug/*.pug' )
        .pipe( pug( {
            pretty: true
        } ) )
        .pipe( gulp.dest( 'build' ) );
} );

gulp.task( 'watch', function () {
    gulp.watch( 'pug/*.pug', [ 'html' ] );
} );

index.pug

doctype html
html(lang="en")
        head
                title The title
        body
                h1 Hi there
                p Some content
                p(class="myP") Some additional content
                p(class="myP", id='myPid') Extra

                div.myDiv.anotherDiv#myID

                .anotherDiv

                #theID

                h2 Are you #[a(href="#") happy]?

Unorderd list of values

ul
        each val in ['K', 'L, 'M', 'N', 'O', 'P', 'R']
        li #[a.tag(href="#", title=val) #{val}]

Define Mixin

mixin article-simple
     article
         .fav
            i.material-icons favorite_border

Use mixin

+article-simple

Add link to a paragraph

p License: #[a(href="http://creativecommons.org/licenses/by-nc-sa/4.0/") Creative Commons].

JavaScript

script.
       $(function() {
            $("#form-input").focus();
       });

Install Pug CLI

npm install pug-cli -g

Parse a file with Pug CLI

pug index.pug --out /tmp
# rendered /tmp/index.html
Tags: , , ,