Gulp-bower-files-from-html NPM

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

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script type="text/javascript" src="../bower_components/react/react.min.js"></script>
    <script type="text/javascript" src="../bower_components/react/react-dom.min.js"></script>
  </head>
  <body>
    <div id="mountNode"></div>
  </body>
</html>

gulpfile.js

var gulp = require('gulp');
var gulpBowerFilesFromHtml = require('gulp-bower-files-from-html');

gulp.task('bower', function() {
  return gulp.src('./src/index.html')
    .pipe(gulpBowerFilesFromHtml())
    .pipe(gulp.dest('./dist'));
});

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

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script type="text/javascript" src="./bower_components/react/react.min.js"></script>
    <script type="text/javascript" src="./bower_components/react/react-dom.min.js"></script>
  </head>
  <body>
    <div id="mountNode"></div>
  </body>
</html>

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

gulpfile.js

var gulp = require('gulp');
var gulpBowerFilesFromHtml = require('gulp-bower-files-from-html');

gulp.task('bower', function() {
  return gulp.src('./index.html', {base: './'})
    .pipe(gulpBowerFilesFromHtml())
    .pipe(gulp.dest('./dist'));
});

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

var gulp = require('gulp');
var gulpBowerFilesFromHtml = require('gulp-bower-files-from-html');

// support multiple html files
gulp.task('bower', function() {
  return gulp.src(['./*.html'], {base: './'})
    .pipe(gulpBowerFilesFromHtml())
    .pipe(gulp.dest('./dist'));
});

// support stream mode
gulp.task('bower', function() {
  return gulp.src(['./*.html'], {base: './', buffer: false})
    .pipe(gulpBowerFilesFromHtml())
    .pipe(gulp.dest('./dist'));
});

Demo

markdown-editor

License

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

bower gulp gulpplugin gulpfriendly main-bower-files

gulp-util through2 vinyl

@infinitebrahmanuniverse/nolb-gulp-b @everything-registry/sub-chunk-1804

1.0.1

9 years ago

1.0.0

9 years ago