handlebars-mix plugin for Laravel-mix
you can use this plugin for compile handlebars templates to html
install
npm install --save handlebars-mixor
yarn add handlebars-mixUsage
in your webpack.mix.js
const mix = require('mix');
require('handlebars-mix');
mix.handlebars('**/*.hbs', '/public/pages/*.html');Parameters
- Input: multiple files:
**/*.hbsor single file:/src/pages/index.hbs - output: multiple files:
/public/*.htmlor single file:/public/index.html
example
Configuration
The plugin has the following config defaults. These are required for handlebars to map all dependencies for compiling handlebars templates.
module.exports = {
data: 'src/markup/data',
decorators: 'src/markup/decorators',
helpers: 'src/markup/helpers',
layouts: 'src/markup/layouts',
partials: 'src/markup/partials',
};Custom Configuration
If you would like to enforce your own folder structure simply create handlebars.config.js or hbs.config.js in your project root.
module.exports = {
data: 'views/json',
helpers: 'views/tools',
layouts: 'views/templates',
partials: 'views/partials',
};Features
frontmatter
The plugin has built in support for frontmatter yaml. Processed yaml data will be passed into the templates before compilation. frontmatter yaml data will preferably be at the top of the template file such as the following exampl
source - eaxmple-hbs
---
title: This is a heading
desc: this is a paragraph
names:
- bob
- jane
- mark
---
{{!< mainlayout}}
<h1>{{title}}</h1>
<p>{{desc}}</p>
<ul>
{{#each names}}
<li>{{this}}</li>
{{/each}}
</ul>output - example.html
<html>
<body>
<h1>This is a heading</h1>
<p>this is a paragraph</p>
<ul>
<li>bob</li>
<li>jane</li>
<li>mark</li>
</ul>
</body>
</html>Handlebars Layouts
The plugin has built in support for handlebars-layouts. The advanced example shows how to take advantage of handlebars layouts. Please refer to their documentation for more information.
Handlebars Helpers
The plugin is also including all helpers found in the npm package handlebars-helpers. Please refer to their documentation for example usages.
Note
| you can not use multiple files and compile their to single file
run html files
const mix = require('laravel-mix');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
mix.webpackConfig(() => {
return {
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3003,
watch: true,
server: { baseDir: ['dist'] }
})
]
};
});