This repository has been archived by the owner on Aug 29, 2021. It is now read-only.
forked from gulpjs/gulp
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Offers considerably faster browserify builds by using the watchify module and vinyl-source-stream in place of gulp-browserify.
- Loading branch information
Showing
1 changed file
with
43 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
# Fast browserify builds with watchify | ||
|
||
As a [browserify](http://github.com/substack/node-browserify) project begins to | ||
expand, the time to bundle it slowly gets longer and longer. While it might | ||
start at 1 second, it's possible to be waiting 30 seconds for your project to | ||
build on particularly large projects. | ||
|
||
That's why [substack](http://github/substack) wrote | ||
[watchify](http://github.com/substack/watchify), a persistent browserify | ||
bundler that watches files for changes and *only rebuilds what it needs to*. | ||
This way, that first build might still take 30 seconds, but subsequent builds | ||
can still run in under 100ms – which is a huge improvement. | ||
|
||
Watchify doesn't have a gulp plugin, but it doesn't need one either: you can | ||
use [vinyl-source-stream](http://github.com/hughsk/vinyl-source-stream) to pipe | ||
the bundle stream into your gulp pipeline. | ||
|
||
``` javascript | ||
var source = require('vinyl-source-stream') | ||
var watchify = require('watchify') | ||
var gulp = require('gulp') | ||
|
||
var bundler = watchify('./src/index.js') | ||
var watchFiles = [ | ||
'./src/**/*.js', | ||
'./src/*.js' | ||
] | ||
|
||
gulp.task('browserify', function() { | ||
return bundler.bundle() | ||
.pipe(source('bundle.js')) | ||
.pipe(gulp.dest('./dist')) | ||
}) | ||
|
||
gulp.task('watch', ['browserify'], function() { | ||
gulp.watch(watchFiles, ['browserify']) | ||
}) | ||
|
||
// Optionally, you can apply transforms | ||
// and other configuration options on the | ||
// bundler just as you would with browserify | ||
bundler.transform('brfs') | ||
``` |