Laravel-elixir-template NPM

Laravel Elixir Template

This is a simple wrapper around gulp-template and gulp-htmlmin to substitute variables into a static HTML template using Laravel's Elixir.

My main usage for this is when developing VueJS apps and I just want to serve up a standard HTML file, rather than passing the request through to Laravel just because I want to use the versioned assets and thus needing the elixir() function in the blade templates. This gives you the ability to serve just the HTML file, without taking the performance hit by passing the request into PHP, and still make use of Elixir's versioned assets.

Installation

To install you just need to require the module after installing it with NPM.

npm install laravel-elixir-template

var elixir = require('laravel-elixir');

require('laravel-elixir-template');

elixir(function(mix) {
    mix.template('template/*.html');
});

Usage

The most basic usage would just be to substitute the versioned asset paths into your template. By default it reads the manifest.json found within your build folder when versioning assets.

elixir(function(mix) {
    mix.scss('app.scss')
        .webpack('app.js')
        .version(['app.css', 'app.js'])
        .template('template/*.html');
});

<!doctype html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="<%= css %>">
    </head>
    <body>
        <script src="<%= js %>"></script>
    </body>
</html>

You may also supply an output path, by default your public path is used. This example below will transfer your templates into web rather than your usual public folder.

elixir(function(mix) {
    mix.scss('app.scss')
        .webpack('app.js')
        .version(['app.css', 'app.js'])
        .template('template/*.html', 'web');
});

Extra variables may also be passed into the template function, and you don't have to version assets if you don't wish to.

elixir(function(mix) {
    mix.template('template/*.html', 'public', {heroTitle: 'Hello World'});
});

<!doctype html>
<html lang="en">
    <body>
        <div class="hero">
            <h1 class="hero-title"><%= heroTitle %></h1>
        </div>
    </body>
</html>

Options

HTML Minification

By default HTML will be minified if gulp is run with the --production argument.

Elixir.config.template.minify = false

Further options can be passed to the gulp-htmlmin plugin itself by settings variables on the options property of the template config. See the gulp-htmlmin for all the options you may pass here https://github.com/kangax/html-minifier#options-quick-reference

Elixir.config.template.options = {
    removeComments: true,
    collapseWhitespace: true
};

License

laravel elixir versioned template

extend gulp-htmlmin gulp-template

@everything-registry/sub-chunk-2044 @zalastax/nolb-lara

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago