Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
gulpfile.js with browserify, reactify, watchify and gulp-notify.
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"
}
@yoshuawuyts

This comment has been minimized.

Copy link

yoshuawuyts commented Aug 19, 2014

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 (with vinyl-source-stream) is the way to go.

@jkarttunen

This comment has been minimized.

Copy link

jkarttunen commented Aug 25, 2014

getting
'[gulp] 'bundle:js' errored after 17 ms bundle() no longer accepts option arguments.
Move all option arguments to the browserify() constructor.
'

@mwq27

This comment has been minimized.

Copy link

mwq27 commented Oct 14, 2014

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 :)

@mikaelbr

This comment has been minimized.

Copy link

mikaelbr commented Nov 6, 2014

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

@dey-dey

This comment has been minimized.

Copy link

dey-dey commented Mar 11, 2015

passing those props into watchify gives me:

TypeError: Cannot read property 'cache' of undefined
@hequ

This comment has been minimized.

Copy link

hequ commented Apr 10, 2015

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

@paulftw

This comment has been minimized.

Copy link

paulftw commented May 21, 2015

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();
}
@nvartolomei

This comment has been minimized.

Copy link

nvartolomei commented May 26, 2015

@paulftw your solution still does not work with 3.2.1

@inca

This comment has been minimized.

Copy link

inca commented Jul 23, 2015

@nvartolomei I'm pretty sure docs for watchify state that you should add cache: {} and packageCache: {} to browserify props.

@arufian

This comment has been minimized.

Copy link

arufian commented Aug 7, 2015

@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

@wesbos

This comment has been minimized.

Copy link

wesbos commented Aug 10, 2015

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:

https://gist.github.com/wesbos/52b8fe7e972356e85b43

@ngryman

This comment has been minimized.

Copy link

ngryman commented Feb 28, 2016

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'])
})
@obouchari

This comment has been minimized.

Copy link

obouchari commented Apr 6, 2016

Is there an advantage of using watchify() over gulp-watch()?

@dpmorrow

This comment has been minimized.

Copy link

dpmorrow commented Jun 17, 2016

@obouchari incremental builds and thus reduced time to build each change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.