npmpackage.info

Gathering detailed insights and metrics for bs-html-injector

Other packages similar to bs-html-injector

bs-snippet-injector

2.0.1

Write & Remove the BrowserSync Snippet to a file

bs-logger

0.2.6

Bare simple logger for NodeJS

@tanem/svg-injector

10.1.68

Fast, caching, dynamic inline SVG DOM injection library.

rollup-plugin-version-injector

1.3.3

A simple rollup.js plugin to inject your application's version number and/or today's date into your built js, html, and css files!

Gathering detailed insights and metrics for bs-html-injector

bs-html-injector

BrowserSync html injector

3.0.3

JavaScript

2,592,388 2.7

Installations

npm install bs-html-injector

Pull Requests

Open

2

Total

9

Closed

3

Merged

4

Issues

Open

9

Total

23

Closed

14

Releases

Unable to fetch releases

Developer

shakyshane

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

4.4.5

NPM Version

2.15.5 Statistics

78 Stars

81 Commits

21 Forks

8 Watching

4 Branches

6 Contributors

Updated on 20 May 2023

Languages

JavaScript (97.96%)

HTML (2.04%)

Total Downloads

Cumulative downloads

Total Downloads

2,592,388

Last day

53.3%

1,145

Compared to previous day

Last week

4,526

Compared to previous week

Last month

9.6%

18,670

Compared to previous month

Last year

-30.8%

403,321

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

debug dom-compare-temp jsdom request

Dev Dependencies

browser-sync chai lodash-cli mocha multiline socket.io-client

Versions

HTML Injector

Browsersync plugin for injecting HTML changes without reloading the browser. Requires an existing page with a <body> tag.

Install (Node V4.0.0 & above)

1$ npm i browser-sync bs-html-injector

Install (Node V0.10.x 0.12.x)

1$ npm i browser-sync bs-html-injector@2

Examples & Recipes including 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

1browserSync.use(require("bs-html-injector"), {
2    files: ["app/*.html", "app/templates/**"]
3});

restrictions - Array Limit the comparisons to a certain elements.

1browserSync.use(require("bs-html-injector"), {
2    files: "app/*.html",
3    restrictions: ['#header', '#footer']
4});

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.

1browserSync.use(require("bs-html-injector"), {
2    files: "app/*.html",
3    excludedTags: ["BODY"]
4});

Example

Create a file called bs.js and enter the following: (update the paths to match yours)

1// requires version 2.0 of Browsersync or higher.
2var browserSync  = require("browser-sync").create();
3var htmlInjector = require("bs-html-injector");
4
5// register the plugin
6browserSync.use(htmlInjector, {
7    // Files to watch that will trigger the injection
8    files: "app/*.html" 
9});
10
11// now run Browsersync, watching CSS files as normal
12browserSync.init({
13  files: "app/styles/*.css"
14});

Gulp example

1var gulp         = require("gulp");
2var browserSync  = require("browser-sync").create();
3var htmlInjector = require("bs-html-injector");
4
5/**
6 * Start Browsersync
7 */
8gulp.task("browser-sync", function () {
9    browserSync.use(htmlInjector, {
10        files: "app/*.html"
11    });
12    browserSync.init({
13        server: "test/fixtures"
14    });
15});
16
17/**
18 * Default task
19 */
20gulp.task("default", ["browser-sync"], function () {
21    gulp.watch("test/fixtures/*.html", htmlInjector);
22});

Grunt example

1// This shows a full config file!
2module.exports = function (grunt) {
3    grunt.initConfig({
4        watch: {
5            files: 'app/scss/**/*.scss',
6            tasks: ['bsReload:css']
7        },
8        sass: {
9            dev: {
10                files: {
11                    'app/css/main.css': 'app/scss/main.scss'
12                }
13            }
14        },
15        browserSync: {
16            dev: {
17                options: {
18                    watchTask: true,
19                    server: './app',
20                    plugins: [
21                        {
22                            module: "bs-html-injector",
23                            options: {
24                                files: "./app/*.html"
25                            }
26                        }
27                    ]
28                }
29            }
30        },
31        bsReload: {
32            css: "main.css"
33        }
34    });
35
36    // load npm tasks
37    grunt.loadNpmTasks('grunt-contrib-sass');
38    grunt.loadNpmTasks('grunt-contrib-watch');
39    grunt.loadNpmTasks('grunt-browser-sync');
40
41    // define default task
42    grunt.registerTask('default', ['browserSync', 'watch']);
43};

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Security-Policy

Determines if the project has published a security policy.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

2.7

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More