Gulp-inject-element NPM

gulp-inject-file

Gulp plugin for injecting elements defined in another file in your code.

Information

TOTAL REMAKE!!

Main reason that i wrote the plugin was because i had to write inhuman code, to repeat as less as possible code while developing a website.

How do i achieve this now? wel code that comes back on different pages, is now to be made in a separate file, nice examples of this code are: the footer and header of a webpage, which are mostly the same. the navigation is always returning but might have differences, and the head is always very alike, yet not 100%

And it was with these small differences i got always stuck, but here's a solution

Installation

npm install --save gulp-inject-element

Usage

It wil allow you to replace content in any html file using a simple gulp task. This can be helpfull during the build process. Content can be replaced using its element-name, its class or its id, so using id is safest if only one element has to be replaced, if u create custom elements (..bunch of nested html..) you can now extract them to a different file, so when reusing them on different pages, one can make changes at one place and deploy it everywhere.

Even more awsome might be the use of custom variables (declared using $myVariable$) and replace them with gulp on build time using a simple task. Very usefull to maintain css or javascript imports over different files.

At last it is even possible to only do certain injects depending on the filename, i suggest you take a carefull look at the examples, sure there is something usefull for your project

Options

All options are 'null' by default.

uses - asks a string 'var' or 'dom' which indicates how to do replaces
find - an array of strings pointing at elements or variables (use .classname or #idname for class and id's if uses equals 'dom')
injectfiles - optional the paths to files for injecting, their position in the array determs which argument from find to replace
injectstrings - optional the string to use for injecting when injectfile at same position in array equals null
target - optional an array of strings containing the filenames targetted for injections
ignore - optional an array of strings containing the filenames to ignore for injections

Update

Total remake, previous version suffered from gulp restrictions

Bugs and warnings

i tested it, but i am still not sure all works great, so i would advice to create a test dir as dst on first use.

i need to create some checks for wrong inputs.

Usage details

1. Nesting

the options in find wil be handled from left to right, this implements that the content from the first inject, will be evaluated for the second and so on.

2. Defaults

if no injectfile or inject string is given for a certain element or variable (null values or array to short), this wil result in replacing the matching element or variable by '', which means it is gone. Why using it? some script or links might be usefull for development, but not for final build, this will remove them everywhere.

3. Priority

if a file and a string for the same element or variable are given, the file will be the first to inject, and afterwards the string will evaluate the whole file again and so override the changes made by the file if it finds another match. One might use of this, but i can't find a good reason. If a null is given as parameter, there wont be evaluation of a file.

4. Special var

$filename$ will always be replaced by the name of the file, might be usefull for links or headers or pagetitle,...

Use DOM element

foo.html

<foo>
    <title>mySite|$filename$</title>
</foo>

*.html

<foo></foo>
<nav></nav>
<footer></footer>

var inject = require('gulp-inject-element');

gulp.task('inject-foo', function() {
  var src = './src/*.html',
      dst = './build',
      opts = {
        uses: 'dom',
        find: ['foo', '.nav', '#footer'],
        injectFiles: ['src/html/foo.html', 'src/html/nav.html', null],
        injectStrings: [null, null, '<footer>succes</footer>']
      };

  gulp.src(src)
    .pipe(injectElement(opts))
    .pipe(gulp.dest(dst));
});

Use variables

*.html

<div>$header$ $nav$</div>
<div>$footer$</div>

var inject = require('gulp-inject-element');

gulp.task('inject-foo', function() {
  var src = './src/*.html',
      dst = './build',
      opts = {
        uses: 'var',
        find: ['header', 'nav', 'footer'],
        injectFiles: ['src/html/header.html', 'src/html/nav.html', null],
        injectStrings: [null, null, '<footer>succes</footer>']
      };

  gulp.src(src)
    .pipe(injectElement(opts))
    .pipe(gulp.dest(dst));
});

Use file specific

header.html

<header>$title$ by $author$</header>

var inject = require('gulp-inject-element');

gulp.task('inject-foo', function() {
  var src = './src/*.html',
      dst = './build',
      opts1 = {
        uses: 'dom',
        find: ['header', '.nav', '#footer'],
        injectFiles: ['src/html/header.html', 'src/html/nav.html', null],
        injectStrings: [null, null, '<footer>succes</footer>'],
        ignore: ['dontChangeMe.html']
      };
      opts2 = {
        uses: 'var',
        find: ['$title$',$author$],
        injectFiles: ['src/html/title.html'],
        injectStrings: [null, 'Yannick Vergeylen'],
        target: ['doChangeMe.html','andMe.html']
      };

  gulp.src(src)
    .pipe(injectElement(opts1))
    .pipe(injectElement(opts2))
    .pipe(gulp.dest(dst));
});

First the header wil be injected in all the files except dontChang, then doChangeMe and andMe will have title and author filled in

more examples coming, and its still beta, but i'll make sure everything keeps working on updates, and if not i'll make u a clear error so you can fix it with ease!!