gjh

gulp-js-html-inject-tmp

Gulp plugin for injecting referenced HTML files back into JS code as strings

Showing:

Popularity

Downloads/wk

1

GitHub Stars

1

Maintenance

Last Commit

6yrs ago

Contributors

2

Package

Dependencies

4

Size (min+gzip)

9.6KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

gulp-js-html-inject

This is a small Gulp plugin for injecting referenced HTML files right into JS code as strings.

What is it

The simplest example. JS code:

var template = '@@import template.html';

...corresponding HTML template:

<div>Hello, world!</div>

...and Gulp task:

var gulp = require('gulp');
var inject = require('gulp-js-html-inject');

gulp.task('js', function() {
    return gulp.src('path/to/your/js/*.js')
        .pipe(inject({
            basepath: 'path/to/your/js/'
        }))
        .pipe(gulp.dest('path/for/output'));
});

If we use this plugin, the resulting JS will be:

var template = '<div>Hello, world!</div>';

Goal

The main goal is to embed used templates into JS code - something similar like you can embed images into CSS stylesheets. This reduce the number of HTTP requests and traffic needed to boot up your application - embedded templates are ready to work when script loaded and can be gzipped with it.

More real example

Simple example is not so useful - you need to build your application every time you change something and want to test it, because it cannot load template without injector. But you can modify placeholder to make something like this:

var template = Loader.load('template.html');

Next, we need to tweak Gulp task a bit:

var gulp = require('gulp');
var inject = require('gulp-js-html-inject');

gulp.task('js', function() {
    return gulp.src('path/to/your/js/*.js')
        .pipe(inject({
            basepath: 'path/to/your/js/',
            pattern: /Loader.load\(['"]([a-zA-Z0-9\-_.]+)['"]\)/g
        }))
        .pipe(gulp.dest('path/for/output'));

Final JS output after Gulp task will be the same as in first example. This allow to load templates dynamically with any comfortable method and embed them statically by replacing that method call with a string.

Note

Template paths are not relative to JS file - they are relative to some selected basepath. Optimal decision is to build them from web root so your JS loader can request them dynamically. Then you just need to set injector basepath to that dir to embed all referenced templates.

Options

OptionTypeDefaultDetails
basepathstring""Base path to look up referenced templates from
patternRegExp/'@@import ([a-zA-Z0-9\-_.\\/]+)'/gPattern to match template references. Should have one capture group that will match template path
debugbooleanfalseDisplays some information while working - processed files, found references, injection result

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100