plug-pug

Introduction

Plug-pug helps to quickly build static webpages. It allows the compilation of template * .pug engine files with laravel-mix through its webpackConfig() method.

Dependencies

Plug-pug use laravel-mix in stand-alone, pug-loader and htmlWebPackPlugin to compile pug's files and faker.js to quickly add fake data to your pages

Pug

Pug is a template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. This project was formerly known as "Jade."

You may review the initial documentation here on pugjs.org.

Laravel-mix

Laravel-mix is a fluent API for defining basic webpack build steps for Laravel application. Mix supports several common CSS and JavaScript pre-processors.

You may review the initial documentation here on GitHub.

faker.js

You may review the initial documentation here on marak.github.io.

Installation

Begin by installing plug-pug through NPM or Yarn.

mkdir home-sweet-dir && cd home-sweet-dir
npm init -y
npm install plug-pug --save-dev
touch webpack.mix.js

Usage

let pug = require('plug-pug');

entry()

// String path to pug files 
// Generates html files in the laravel-mix public path
 
entry('path/to/*.pug')
 
// Arrays [path to pug files , output dir]
// Generates html files in the specified dir in the laravel-mix public path
 
entry(['path/to/other/dir/*.pug', 'other/dir']);
 
// Mixed 
entry('path/to/*.pug', ['path/to/other/dir/*.pug', 'other/dir'], ['path/to/another/dir/*.pug', 'yet/another/dir']);
 

withHash()

// append a unique webpack compilation hash to all included scripts and CSS 
 
withHash();
 

withFaker()

// Use faker.js in your pug files
withFaker();
 
// Use faker.js with the given locale
withFaker('fr');

//pug sample : 
p #{faker.lorem.sentences(25)}
 
h3 Hello #{faker.fake("{{name.prefix}} {{name.firstName}} {{name.lastName}}")}

load()

// returns the webpackconfig
load();
 

webpack.mix.js example :

let mix = require('laravel-mix');
let pug = require('plug-pug')
 
mix.js('resources/js/app.js', 'public')
   .sass('resources/sass/app.sass', 'public')
   .webpackConfig(
       pug.entry('resources/pug/*.pug', 
                ['resources/pug/other/dir/*.pug', 'other/dir'])
           .withHash()
           .withFaker('en'))
           .load()
   .setPublicPath('public');

NPM Scripts

The following NPM scripts in your package.json file, speed up your workflow.

  "scripts": {
    "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  }

License

Plug-pug is an open-sourced software licensed under the MIT license.