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
ES6intoES5,scssintocssand then put all 'html', 'css' and 'js' files todist(includingsrc). - 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
ES6intoES5,scssintocssand then put all 'html', 'css' and 'js' files todist(excludingsrc). - 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
srclevel and it should be relative to the html file indist.
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
baseingulp.srcto specify the path of bower_components relative togulpfile.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
License
Under the MIT license. See LICENSE file for more details.
