Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zoubin/gulp-watchify-factor-bundle
Use watchify and factor-bundle in gulp
https://github.com/zoubin/gulp-watchify-factor-bundle
Last synced: 8 days ago
JSON representation
Use watchify and factor-bundle in gulp
- Host: GitHub
- URL: https://github.com/zoubin/gulp-watchify-factor-bundle
- Owner: zoubin
- Created: 2015-06-25T05:09:47.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-04-11T09:04:29.000Z (over 8 years ago)
- Last Synced: 2024-08-11T08:51:54.729Z (3 months ago)
- Language: JavaScript
- Size: 23.4 KB
- Stars: 6
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
Awesome Lists containing this project
README
# gulp-watchify-factor-bundle
[](https://www.npmjs.org/package/gulp-watchify-factor-bundle)
[](https://travis-ci.org/zoubin/gulp-watchify-factor-bundle)
[](https://coveralls.io/github/zoubin/gulp-watchify-factor-bundle)
[](https://david-dm.org/zoubin/gulp-watchify-factor-bundle)
[](https://david-dm.org/zoubin/gulp-watchify-factor-bundle#info=devDependencies)
A sugar wrapper for [browserify], [watchify] and [factor-bundle] to work with [gulp].
The main ideas are borrowed from [reduce-js].
## Usage
gulpfile.js:
```javascript
var reduce = require('gulp-watchify-factor-bundle')
var gulp = require('gulp')
var path = require('path')
var buffer = require('vinyl-buffer')
var uglify = require('gulp-uglify')
var del = require('del')
gulp.task('clean', function () {
return del('build')
})
gulp.task('build', ['clean'], function () {
var basedir = path.join(__dirname, 'src')
// Create a browserify instance
// same with `browserify(opts)`
var b = reduce.create({ basedir: basedir })
// find entries
// same with gulp.src()
return reduce.src('page/**/index.js', { cwd: basedir })
// apply `factor-bundle`
// and call b.bundle() which produces a vinyl stream now
.pipe(reduce.bundle(b, { common: 'common.js' }))
// apply gulp plugins to process the vinyl stream
.pipe(buffer())
.pipe(uglify())
// same with gulp.dest
.pipe(reduce.dest('build'))
})
gulp.task('watch', ['clean'], function () {
var basedir = path.join(__dirname, 'src')
// Create a browserify instance
// same with `browserify(opts)`
var b = reduce.create({ basedir: basedir })
b.on('log', console.log.bind(console))
// find entries
// same with gulp.src()
return reduce.src('page/**/index.js', { cwd: basedir })
// apply `factor-bundle` and `watchify`
.pipe(reduce.watch(b, { common: 'common.js' }))
// whenever `b.bundle()` is called,
// event 'bundle' is fired
.on('bundle', function (vinylStream) {
// vinylStream = b.bundle()
vinylStream
// apply gulp plugins to process the vinyl stream
.pipe(buffer())
.pipe(uglify())
// same with gulp.dest
.pipe(reduce.dest('build'))
})
})
```
The source directory:
```
example/src/
├── node_modules
│ └── color-map
│ └── index.js
└── page
├── blue
│ └── index.js
└── red
└── index.js
```
The build directory:
```
⌘ tree example/build/
example/build/
├── common.js
└── page
├── blue
│ └── index.js
└── red
└── index.js
```
## Exports
### create()
Same with the [browserify] constructor.
## bundle(b, bundleOptions)
A gulp plugin to use [browserify] with [factor-bundle],
and produces a vinyl stream.
**b**
The browserify instance.
**bundleOptions**
Options for [factor-bundle].
`bundleOptions.common` specifies the path to the common bundle.
All other options are exactly the same with those consumed by [factor-bundle].
**NOTE**
`bundleOptions.outputs` must be an array of file paths.
However, if not specified, a new bundle is created for each entry,
with the same path with the entry.
## watch(b, bundleOptions, watchifyOptions)
A gulp plugin to use [browserify] with [factor-bundle] and [watchify].
**b**
The browserify instance.
**bundleOptions**
Options for [factor-bundle].
**watchOptions**
Options for [watchify].
**NOTE**
This method creates a transform to process the entry stream,
and emit a `bundle` event whenever `b.bundle()` called.
`reduce.watch().on('bundle', vinylStream => {})`
[watchify]: https://www.npmjs.com/package/watchify
[factor-bundle]: https://www.npmjs.com/package/factor-bundle
[browserify]: https://www.npmjs.com/package/browserify
[gulp]: https://www.npmjs.com/package/gulp
[reduce-js]: https://www.npmjs.com/package/reduce-js