plug-pug v0.1.0
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.
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago