laravel-mix-manifest-paths

A laravel-mix extension that grants access to the generated manifest's paths in static assets.

Installation

Via npm

npm i -D laravel-mix-manifest-paths

Via yarn

yarn add -D laravel-mix-manifest-paths

Usage

// webpack.mix.js

const mix = require("laravel-mix");

require("laravel-mix-manifest-paths");

mix.setPublicPath("public");
mix.version();

mix.js("src/app.js", "public/js")
   .sass("src/app.scss", "public/css")
   .manifestPaths("src/txt/**", "public/txt");

Now, after the compilation has finished, files matching the glob src/txt/** will be compiled as lodash templates and a mix function will be available to them.

The mix function works somewhat the same way as the laravel's helper. So this:

blablabla {{mix('/js/app.js')}}
should be html-escaped {{ mix("/js/<special>.js") }}
should not be html-escaped {{! mix("/js/<special>.js") !}}

will be compiled to this (Of course, your hashes will be different):

blablabla /js/app.js?id=752e64981810d0203520
should be html-escaped /js/<special>.js?id=68b329da9893e34099c7
should not be html-escaped /js/<special>.js?id=68b329da9893e34099c7

Options

All options are ... optional, and they're merged with the default options object.

• delimiters {object}:

  • left {string}: The left delimiter tag. Default is "{{"
  • right {string}: The right delimiter tag. Default is "}}"

• flatten {boolean}: If true flatten all destination paths, else preserve the structure of the extracted common parent directory (extracted using glob-parent). Default is true.

API

mix.manifestPaths(from: string | string[], to: string, options?: Options);

• from: A glob or array of globs that matches source files to compile.
• to: The output directory.
• options: An object to override default options. This parameter is optional.

A method is also exposed so you can change the extension's default options:

setDefaultOptions(options: Options);

And can be used like so:

const {setDefaultOptions} = require("laravel-mix-manifest-paths");

setDefaultOptions({
	delimiters: {
		left: "<<",
		right: ">>",
	},
});

Be aware that calling this function changes the default options only for subsequent calls to mix.manifestPaths.

Contributing

Prerequisites

• nodejs
• npm

Getting Started

After cloning this repo, ensure dependencies are installed by running:

npm install

And to build the final bundle:

npm run build

Tests

To run tests:

npm test

Coverage report is located in tests/coverage.

Linting

Linting is supported by eslint and typescript-eslint.

To run code through the linting script:

npm run lint

And to fix any fixable errors

npm run lint:fix

Commiting changes

Please follow the conventional commits specification, because semantic-release is used to automate the whole package release workflow including:

• determining the next version number.
• generating the release notes.
• publishing the package.

License

MIT