https://github.com/yrtimid/gulp-require-html-inline

Gulp plugin which inlines html templates referenced using require("path-to-file.html") notation
https://github.com/yrtimid/gulp-require-html-inline

Last synced: 11 days ago
JSON representation

Gulp plugin which inlines html templates referenced using require("path-to-file.html") notation

• Host: GitHub
• URL: https://github.com/yrtimid/gulp-require-html-inline
• Owner: yrtimiD
• License: mit
• Created: 2020-03-17T15:45:04.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-05T13:56:52.000Z (about 2 years ago)
• Last Synced: 2024-12-14T20:45:35.777Z (about 1 month ago)
• Language: JavaScript
• Size: 243 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gulp-require-html-inline

Gulp plugin which inline html templates referenced using `require("path-to-file.html")` notation.

Internally uses [html-minifier-terser](https://www.npmjs.com/package/html-minifier-terser) to convert html files to strings.

## Usage example

```sh

npm install --save-dev gulp-require-html-inline

```

[html-minifier-terser](https://www.npmjs.com/package/html-minifier-terser) is a peer dependency, so make sure to install it if it's not already in your `package.json`:

```sh

npm install --save-dev html-minifier-terser@5

```

```js

//gulpfile.js:

const gulp = require("gulp");

const htmlInline = require("gulp-require-html-inline");

gulp.task("default", function () {

	return gulp.src("./file.js")

		.pipe(htmlInline())

		.pipe(gulp.dest("result"));

});

```

Assuming next files are in the working folder:

```js

//file.js

var a = require("./test.html");

```

```html



	Some " text ' with ` special characters



```

Output will be a single file:

```js

//result/file.js

var a = `
Some " text ' with \` special characters
`;

```

For more examples see [demo](https://github.com/yrtimiD/gulp-require-html-inline/tree/master/demo) folder and execute `npm run demo` locally.


## Configuration

`htmlInline` function accepts optional [minifier options](https://github.com/DanielRuf/html-minifier-terser#options-quick-reference) object.

If not provided, default configuration includes `collapseWhitespace: true`

which ensures that produced html is a single line (otherwise it can break commented out `require`s).

## Implementation notes

- Require statements are detected using simple regex and no semantic code parsing is done. All kind of quotation marks are supports and both `.html` and `.htm` extensions are accepted. Some examples:

  - `require("a.html")`

  - `require('a.html')`

  - ``require(`a.html`)``

  - `require("a.htm")`

- Unresolved files will be skipped, logged and `require` will be untouched.

- Multiline html files might break commented out require statements if custom minifier options are used. See [Configuration section](#configuration)