Installations

npm install gulp-bower-files-from-html

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

4.4.4

NPM Version

3.8.9 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

2

JavaScript

HTML

JavaScript (70.28%)

HTML (29.72%)

Developer

xiaoyanhao

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

21 Commits

1 Watchers

1 Branches

1 Contributors

Updated on Jun 12, 2017

Maintainers

1

View All 1 Contributors

Package Meta Information

Latest Version

1.0.1

Package Id

gulp-bower-files-from-html@1.0.1

Size

648.59 kB

NPM Version

3.8.9

Node Version

4.4.4

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

3

gulp-util through2 vinyl

Dev Dependencies

5

assert gulp gulp-mocha mocha stream-assert

gulp-bower-files-from-html

Extract the bower files from the html files according to script and link tags.

Installation

npm install --save-dev gulp-bower-files-from-html

Usage

For example, there is a project:

.
|---bower_components
    |---react
        |---react.min.js
        |---react-dom.min.js
        |___...
|---dist 
|---node_modules
|---src
    |---index.html
    |---index.jsx
    |---index.scss
    |___...
|---gulpfile.js
|---package.json
|---bower.json
|___...

Scenario 1

compile ES6 into ES5, scss into css and then put all 'html', 'css' and 'js' files to dist(including src).
copy the bower components that we use to dist(That is what the plugin does).

src/index.html

1<!DOCTYPE html>
2<html lang='en'>
3  <head>
4    <meta charset="UTF-8">
5    <title>Example</title>
6    <script type="text/javascript" src="../bower_components/react/react.min.js"></script>
7    <script type="text/javascript" src="../bower_components/react/react-dom.min.js"></script>
8  </head>
9  <body>
10    <div id="mountNode"></div>
11  </body>
12</html>

gulpfile.js

1var gulp = require('gulp');
2var gulpBowerFilesFromHtml = require('gulp-bower-files-from-html');
3
4gulp.task('bower', function() {
5  return gulp.src('./src/index.html')
6    .pipe(gulpBowerFilesFromHtml())
7    .pipe(gulp.dest('./dist'));
8});

As a result, the dist will look like:

|---dist
    |---bower_components
        |---react.min.js
        |___react-dom.min.js
    |---src
        |---index.html
        |---index.js
        |---index.css
        |___...

Scenario 2

compile ES6 into ES5, scss into css and then put all 'html', 'css' and 'js' files to dist(excluding src).
copy the bower components that we use to dist(That is what the plugin does).

src/index.html

1<!DOCTYPE html>
2<html lang='en'>
3  <head>
4    <meta charset="UTF-8">
5    <title>Example</title>
6    <script type="text/javascript" src="./bower_components/react/react.min.js"></script>
7    <script type="text/javascript" src="./bower_components/react/react-dom.min.js"></script>
8  </head>
9  <body>
10    <div id="mountNode"></div>
11  </body>
12</html>

The path of bower_components should omit src level and it should be relative to the html file in dist.

gulpfile.js

1var gulp = require('gulp');
2var gulpBowerFilesFromHtml = require('gulp-bower-files-from-html');
3
4gulp.task('bower', function() {
5  return gulp.src('./index.html', {base: './'})
6    .pipe(gulpBowerFilesFromHtml())
7    .pipe(gulp.dest('./dist'));
8});

Use option base in gulp.src to specify the path of bower_components relative to gulpfile.js.

As a result, the dist will look like:

|---dist
    |---bower_components
        |---react.min.js
        |___react-dom.min.js
    |---index.html
    |---index.js
    |---index.css
    |___...

Scenario 3

1var gulp = require('gulp');
2var gulpBowerFilesFromHtml = require('gulp-bower-files-from-html');
3
4// support multiple html files
5gulp.task('bower', function() {
6  return gulp.src(['./*.html'], {base: './'})
7    .pipe(gulpBowerFilesFromHtml())
8    .pipe(gulp.dest('./dist'));
9});
10
11// support stream mode
12gulp.task('bower', function() {
13  return gulp.src(['./*.html'], {base: './', buffer: false})
14    .pipe(gulpBowerFilesFromHtml())
15    .pipe(gulp.dest('./dist'));
16});

Demo

markdown-editor

License

Under the MIT license. See LICENSE file for more details.

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.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

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

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

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

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

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

Score

3

/10

Last Scanned on 2025-07-07

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