Skip to content

Latest commit

 

History

History
146 lines (114 loc) · 3.03 KB

README.md

File metadata and controls

146 lines (114 loc) · 3.03 KB
Raw

handlebars-mix plugin for Laravel-mix

you can use this plugin for compile handlebars templates to html


install

npm install --save handlebars-mix

or

yarn add handlebars-mix

Usage

in your webpack.mix.js

const mix = require('mix');
require('handlebars-mix');

mix.handlebars('**/*.hbs', '/public/pages/*.html');

Parameters

  • Input: multiple files:**/*.hbs or single file:/src/pages/index.hbs
  • output: multiple files:/public/*.html or 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'] }
            })
        ]
    };
});