Parse your HTML/JS file and copy bower/npm files to your destination directory
npm install gulp-web-dependenciesParse your HTML/JS file and copy bower/npm dependencies to your destination directory




npm install --save-dev gulp-web-dependencies
The project structure:
```
project/
├── bower_components
│ ├── bootstrap
│ │ └── dist
│ │ ├── css
│ │ │ ├── bootstrap.min.css
│ │ │ ├── bootstrap-theme.min.css
│ │ │ └── ...
│ │ └── js
│ │ ├── bootstrap.min.js
│ │ └── ...
│ ├── require1k
│ │ └── require1k.min.js
│ └── jquery
│ └── dist
│ ├── jquery.min.js
│ └── ...
├── node_modules
│ ├── angular
│ │ └── angular.min.js
│ └── firebase
│ ├── app.js
│ ├── auth.js
│ └── ...
├── src
│ ├── index.html
│ └── app.js
└── gulpfile.js
Use relative paths for NPM/Bower dependencies:
The index.html:
` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus enim leo, ac lacinia purus accumsan sit amet. In ultrices sagittis nulla, ut dapibus.html`
Page title
The app.js:
`js
var _app = require('../node_modules/firebase/app');
var _auth = require('../node_modules/firebase/auth');
// ...
`
In your gulpfile.js, add the task:
`js
var gulp = require('gulp')
, dependencies = require('gulp-web-dependencies');
var path_dest = 'dist';
gulp.task('dependencies', function() {
return gulp.src('src/index.html')
.pipe(dependencies({
dest: path_dest, // The basedir of your application. default: path.dirname(file.path)
prefix: '/vendor', // The URL prefix. Default "/"
}))
.pipe(gulp.dest(path_dest));
});
// or using a template preprocessing (pug)
gulp.task('dependencies-jade', function() {
return gulp.src('src/app.js')
.pipe(pug())
.pipe(dependencies({
dest: path_dest,
prefix: '/vendor',
}))
.pipe(gulp.dest(path_dest));
});
// parsing js files
gulp.task('dependencies-js', function() {
return gulp.src('src/app.js', { base: 'src' })
.pipe(dependencies({
dest: path_dest,
base: 'src' // the gulp.src base value
}))
.pipe(gulp.dest(path_dest));
});
// Gulp Default Task
gulp.task('default', ['dependencies', 'dependencies-jade', 'dependencies-js']);
`
After the build, get:
``
project/
├── bower_components
│ └── ...
├── dist
│ ├── index.html
│ ├── products.html
│ ├── node_modules
│ │ └── firebase
│ │ ├── app.js
│ │ └── auth.js
│ └── vendor
│ ├── angular
│ │ └── angular.min.js
│ ├── bootstrap
│ │ └── dist
│ │ ├── css
│ │ │ ├── bootstrap.min.css
│ │ │ └── bootstrap-theme.min.css
│ │ └── js
│ │ └── bootstrap.min.js
│ └── jquery
│ └── dist
│ └── jquery.min.js
├── node_modules
│ └── ...
├── src
│ ├── index.html
│ └── app.js
└── gulpfile.js
index.html:
` Lorem ipsum dolor sit amet, consectetur adipiscing elit.html
Page title
`
app.js:
`js
var _app = require('firebase/app');
var _auth = require('firebase/auth');
// ...
`
You can use the the folders option to define your search folders pattern. Each folder is separated by a pipe |:
`js
gulp.task('dependencies', function() {
return gulp.src('src/*/.pug')
.pipe(pug())
.pipe(dependencies({
folders: 'bower|assets',
dest: 'dist',
prefix: '/vendor',
}))
.pipe(gulp.dest('dist'));
});
`
`js
gulp.task('dependencies', function() {
return gulp.src('src/*/.pug')
.pipe(pug())
.pipe(dependencies({
dest: 'dist',
prefix: '/vendor',
flat: true
}))
.pipe(gulp.dest('dist'));
});
`
After the build, get:
``
project/
├── ...
├── dist
│ ├── ..
│ └── vendor
│ ├── angular.min.js
│ ├── bootstrap.min.css
│ ├── bootstrap.min.js
│ ├── bootstrap-theme.min.css
│ └── jquery.min.js
├── ...
` Lorem ipsum dolor sit amet, consectetur adipiscing elit.html
Page title
``
Under the MIT license. See LICENSE file for more details.