# bs-html-injector
> Inject only HTML that has changed.
Latest version **3.0.3** (published 2016-09-06) · MIT license · 0 weekly downloads
## Install
```sh
npm install bs-html-injector
pnpm add bs-html-injector
yarn add bs-html-injector
bun add bs-html-injector
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.0.3 |
| Published | 2016-09-06 |
| First published | 2014-08-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 76 |
| Maintainers | shakyshane |
| Keywords | browser sync plugin, html injection |
## Links
- npm: https://www.npmjs.com/package/bs-html-injector
- Repository: https://github.com/shakyshane/html-injector
- Homepage: https://github.com/shakyshane/html-injector#readme
- Issues: https://github.com/shakyshane/html-injector/issues
- npm.io page: https://npm.io/package/bs-html-injector
## Dependencies (4)
- [debug](https://npm.io/package/debug.md) ^2.1.3
- [jsdom](https://npm.io/package/jsdom.md) ^6.5.1
- [request](https://npm.io/package/request.md) ^2.40.0
- [dom-compare-temp](https://npm.io/package/dom-compare-temp.md) ^0.1.0
## Alternatives
- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads
## Recent versions
- 3.0.3 (latest) — 2016-09-06
- 3.0.2 — 2016-06-04
- 3.0.1 — 2016-03-22
- 3.0.0 — 2015-10-23
- 2.0.4 — 2015-05-28
- 2.0.3 — 2015-04-25
- 2.0.2 — 2015-04-12
- 2.0.1 — 2015-04-06
- 2.0.0 — 2015-04-06
- 1.5.2 — 2015-03-21
- 1.5.1 — 2015-03-20
- 1.5.0 — 2015-03-18
- 1.4.2 — 2015-03-18
- 1.4.1 — 2015-03-18
- 1.4.0 — 2015-03-17
- … 7 more at https://npm.io/package/bs-html-injector/versions
## README
### HTML Injector [](https://travis-ci.org/shakyShane/html-injector)
[Browsersync](http://www.browsersync.io/) plugin for injecting HTML changes without reloading the browser. Requires an existing page with a `` tag.
## Install (Node V4.0.0 & above)
```bash
$ npm i browser-sync bs-html-injector
```
## Install (Node V0.10.x 0.12.x)
```bash
$ npm i browser-sync bs-html-injector@2
```
## Examples & Recipes including html-injection
* [Examples folder](https://github.com/shakyShane/html-injector/tree/master/examples)
* [HTML/CSS injection example](https://github.com/BrowserSync/recipes/tree/master/recipes/html.injection)
* [Grunt, SASS, HTML/CSS injection example](https://github.com/BrowserSync/recipes/tree/master/recipes/grunt.html.injection)
##Options
**files** - String|Array
File watching patterns that will trigger the injection. NOTE: Ensure you are
not also watching the same file through the regular Browsersync
config - this will cause a full reload and the inject will not happen
```js
browserSync.use(require("bs-html-injector"), {
files: ["app/*.html", "app/templates/**"]
});
```
**restrictions** - Array
Limit the comparisons to a certain elements.
```js
browserSync.use(require("bs-html-injector"), {
files: "app/*.html",
restrictions: ['#header', '#footer']
});
```
**excludedTags** - Array
When working from scratch within the `body` tag, the plugin will work just fine. But when you start
working with nested elements, you might want to add the following configuration to improve the
injecting.
```js
browserSync.use(require("bs-html-injector"), {
files: "app/*.html",
excludedTags: ["BODY"]
});
```
###Example
Create a file called `bs.js` and enter the following: (update the paths to match yours)
```js
// requires version 2.0 of Browsersync or higher.
var browserSync = require("browser-sync").create();
var htmlInjector = require("bs-html-injector");
// register the plugin
browserSync.use(htmlInjector, {
// Files to watch that will trigger the injection
files: "app/*.html"
});
// now run Browsersync, watching CSS files as normal
browserSync.init({
files: "app/styles/*.css"
});
```
###Gulp example
```js
var gulp = require("gulp");
var browserSync = require("browser-sync").create();
var htmlInjector = require("bs-html-injector");
/**
* Start Browsersync
*/
gulp.task("browser-sync", function () {
browserSync.use(htmlInjector, {
files: "app/*.html"
});
browserSync.init({
server: "test/fixtures"
});
});
/**
* Default task
*/
gulp.task("default", ["browser-sync"], function () {
gulp.watch("test/fixtures/*.html", htmlInjector);
});
```
### Grunt example
```js
// This shows a full config file!
module.exports = function (grunt) {
grunt.initConfig({
watch: {
files: 'app/scss/**/*.scss',
tasks: ['bsReload:css']
},
sass: {
dev: {
files: {
'app/css/main.css': 'app/scss/main.scss'
}
}
},
browserSync: {
dev: {
options: {
watchTask: true,
server: './app',
plugins: [
{
module: "bs-html-injector",
options: {
files: "./app/*.html"
}
}
]
}
}
},
bsReload: {
css: "main.css"
}
});
// load npm tasks
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
// define default task
grunt.registerTask('default', ['browserSync', 'watch']);
};
```
---
_Source: https://npm.io/package/bs-html-injector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._