-
-
Save Sigmus/9253068 to your computer and use it in GitHub Desktop.
| var gulp = require('gulp'); | |
| var gutil = require('gulp-util'); | |
| var browserify = require('gulp-browserify'); | |
| gulp.task('build', function() { | |
| gulp.src('./scripts/main.js', {read: false}) | |
| .pipe(browserify({ | |
| transform: ['reactify'], | |
| extensions: ['.jsx'] | |
| })) | |
| .on('error', gutil.log) | |
| .on('error', gutil.beep) | |
| .pipe(gulp.dest('./build/')) | |
| }); | |
| gulp.task('watch', function() { | |
| gulp.watch('./scripts/**', ['build']); | |
| }); | |
| gulp.task('default', ['build', 'watch']) |
| { | |
| "name": "gulp example", | |
| "version": "0.0.0", | |
| "description": "", | |
| "main": "gulpfile.js", | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1" | |
| }, | |
| "author": "", | |
| "license": "BSD-2-Clause", | |
| "devDependencies": { | |
| "gulp": "~3.5.2", | |
| "gulp-util": "~2.2.14", | |
| "gulp-browserify": "~0.4.6", | |
| "reactify": "~0.8.1" | |
| } | |
| } |
getting
'[gulp] 'bundle:js' errored after 17 ms bundle() no longer accepts option arguments.
Move all option arguments to the browserify() constructor.
'
Im using some newer versions of watchify and browserify, which means I had to tweak the gulpfile a little.
{
...
"dependencies": {
"es6-promise": "^1.0.0",
"firebase-client": "tinj/firebase-client",
"firebase-simple-login": "tinj/firebase-simple-login",
"flux": "^2.0.1",
"jquery": "^2.1.1",
"material-ui": "^0.1.21",
"q": "^1.0.1",
"react": "^0.11.0",
"react-router": "^0.9.0",
"request": "^2.40.0"
},
"devDependencies": {
"browserify": "^6.0.0",
"envify": "~3.0.0",
"gulp": "^3.8.7",
"gulp-jshint": "^1.8.4",
"gulp-less": "^1.3.6",
"gulp-notify": "^2.0.0",
"gulp-util": "^3.0.1",
"jest-cli": "^0.1.5",
"jshint-stylish": "^0.4.0",
"lodash": "^2.4.1",
"mock-promises": "0.0.3",
"reactify": "^0.14.0",
"statics": "~0.1.0",
"uglify-js": "^2.4.13",
"vinyl-source-stream": "^1.0.0",
"watchify": "^2.0.0"
},
...
}So here's the main change to the gulpfile.js
function buildScript(file, watch) {
var props ={entries: [scriptsDir + '/' + file], debug: true, cache: {}, packageCache: {}};
var bundler = watch ? watchify(browserify(props)) : browserify(props);
...I hope this helps others. Thanks for this gulpfile :)
gulp-notify (v2.0.1) now closes the stream for you, as it should have done the whole time. This means you can use a simpler syntax.
I've updated the example gulpfile with the changes from @mwq27 and with using latest gulp-notify here: https://gist.github.com/mikaelbr/54b02412fc651d4e5c9a
passing those props into watchify gives me:
TypeError: Cannot read property 'cache' of undefined
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:
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.
For anyone that found this repo, this is the correct way to use
react+browserify+gulp. Other approaches do silly things, having a browserify transform (withvinyl-source-stream) is the way to go.