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 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 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 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 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 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 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 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 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 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 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 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 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 obouchari commented Apr 6, 2016

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

@dpmorrow

This comment has been minimized.

Copy link

@dpmorrow 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