-
-
Save Sigmus/9253068 to your computer and use it in GitHub Desktop.
var source = require('vinyl-source-stream'); | |
var gulp = require('gulp'); | |
var gutil = require('gulp-util'); | |
var browserify = require('browserify'); | |
var reactify = require('reactify'); | |
var watchify = require('watchify'); | |
var notify = require("gulp-notify"); | |
var scriptsDir = './scripts'; | |
var buildDir = './build'; | |
function handleErrors() { | |
var args = Array.prototype.slice.call(arguments); | |
notify.onError({ | |
title: "Compile Error", | |
message: "<%= error.message %>" | |
}).apply(this, args); | |
this.emit('end'); // Keep gulp from hanging on this task | |
} | |
// Based on: http://blog.avisi.nl/2014/04/25/how-to-keep-a-fast-build-with-browserify-and-reactjs/ | |
function buildScript(file, watch) { | |
var props = {entries: [scriptsDir + '/' + file]}; | |
var bundler = watch ? watchify(props) : browserify(props); | |
bundler.transform(reactify); | |
function rebundle() { | |
var stream = bundler.bundle({debug: true}); | |
return stream.on('error', handleErrors) | |
.pipe(source(file)) | |
.pipe(gulp.dest(buildDir + '/')); | |
} | |
bundler.on('update', function() { | |
rebundle(); | |
gutil.log('Rebundle...'); | |
}); | |
return rebundle(); | |
} | |
gulp.task('build', function() { | |
return buildScript('main.js', false); | |
}); | |
gulp.task('default', ['build'], function() { | |
return buildScript('main.js', true); | |
}); |
{ | |
"name": "scripts", | |
"version": "0.0.0", | |
"description": "", | |
"main": "gulpfile.js", | |
"devDependencies": { | |
"envify": "~1.2.1", | |
"react": "~0.10.0", | |
"browserify": "~4.2.0", | |
"gulp": "~3.8.5", | |
"gulp-notify": "~1.4.0", | |
"gulp-util": "~2.2.19", | |
"reactify": "~0.13.1", | |
"vinyl-source-stream": "~0.1.1", | |
"watchify": "~0.10.2" | |
}, | |
"scripts": { | |
"test": "echo \"Error: no test specified\" && exit 1" | |
}, | |
"author": "", | |
"license": "BSD-2-Clause" | |
} |
I was getting TypeError: Cannot read property 'cache' of undefined
and something else about bundle()
arguments.
It is now necessary to watch a browserify instance: watchify(browserify(props))
. Official docs seem to suggest that too.
My buildScript function looks like this:
function buildScript(file, watch) {
var props = {
entries: [scriptsDir + '/' + file],
debug: true,
cache: {},
packageCache: {},
};
var bundler = watch ? watchify(browserify(props)) : browserify(props);
bundler.transform(reactify);
function rebundle() {
var stream = bundler.bundle();
return stream.on('error', console.log.bind(console))
.pipe(source(file))
.pipe(gulp.dest(buildDir + '/'));
}
bundler.on('update', function() {
rebundle();
gutil.log('Rebundle...');
});
return rebundle();
}
@paulftw your solution still does not work with 3.2.1
@nvartolomei I'm pretty sure docs for watchify state that you should add cache: {}
and packageCache: {}
to browserify props.
@paulftw @nvartolomei are you using gulp-browserify instead of browserify ?
I had the same problem before. Then I realized that I have to use browserify instead gulp-browserify, which have been blacklisted by gulp community
Looks like watchify has changed - you need to wrap an existing browserify. I hit a few more issues as well - some might want to see mine:
You can use gulp-bro which takes care of incremental build under the hood:
gulp.task('build', () => {
return gulp.src('main.js')
.pipe(bro({ error: handleErrors })
.pipe(gulp.dest(buildDir))
})
gulp.task('default', ['build'], () => {
gulp.watch(scriptsDir + '/*.js', ['build'])
})
Is there an advantage of using watchify() over gulp-watch()?
@obouchari incremental builds and thus reduced time to build each change.
I've created a gulpfile with watch for React and Browserify application. I had problems with watchify so I skipped that entirely and used gulp.watch for watching the changes. My version is here:
https://gist.github.com/hequ/79fb775412ea4d044fdd