https://github.com/demsking/gulp-web-dependencies
Parse your HTML/JS files and copy bower/npm dependencies to your destination directory
https://github.com/demsking/gulp-web-dependencies
bower dependencies gulp gulpplugin html javascript js npm vendor
Last synced: 5 months ago
JSON representation
Parse your HTML/JS files and copy bower/npm dependencies to your destination directory
- Host: GitHub
- URL: https://github.com/demsking/gulp-web-dependencies
- Owner: demsking
- License: mit
- Created: 2016-10-23T09:11:52.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2021-09-21T10:04:55.000Z (about 4 years ago)
- Last Synced: 2025-04-28T17:25:59.594Z (5 months ago)
- Topics: bower, dependencies, gulp, gulpplugin, html, javascript, js, npm, vendor
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/gulp-web-dependencies
- Size: 42 KB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gulp-web-dependencies
Parse your HTML/JS file and copy bower/npm dependencies to your destination directory
[](https://travis-ci.org/demsking/gulp-web-dependencies)
[](https://www.bithound.io/github/demsking/gulp-web-dependencies)
[](https://www.bithound.io/github/demsking/gulp-web-dependencies/master/dependencies/npm)
[](https://www.bithound.io/github/demsking/gulp-web-dependencies/master/dependencies/npm)
[](https://www.bithound.io/github/demsking/gulp-web-dependencies)
[](http://commitizen.github.io/cz-cli/)
## Install
`npm install --save-dev gulp-web-dependencies`
## Usage
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`:
```html
Test file
Page title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus enim leo, ac lacinia purus accumsan sit amet. In ultrices sagittis nulla, ut dapibus.
```
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`:
```html
Test file
Page title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```
`app.js`:
```js
var _app = require('firebase/app');
var _auth = require('firebase/auth');
// ...
```
## Use the your own search folders pattern
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'));
});
```
## Use the flat option
```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
├── ...
```
```html
Test file
Page title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```
## License
Under the MIT license. See [LICENSE](https://github.com/demsking/gulp-web-dependencies/blob/master/LICENSE) file for more details.