Search code examples
javascriptgulpbrowserifywatchify

Watchify with gulp is not working


I have created this gulp task for watchifying but it gives this error: Cannot read property 'cache' of undefined

gulp.task('browserify-With-Watch', function () {
"use strict";
var bundler = browserify({
    entries: ['src/js/ede-wrapper.js'], // Only need initial file, browserify finds the deps
    debug: true, // Gives us sourcemapping
    cache: {},
    packageCache: {},
    fullPaths: true
});

var watcher  = watchify(bundler);

return watcher
    .on('update', function () { // When any files update
        watcher.bundle() // Create new bundle that uses the cache for high performance
            .pipe(source('src/js/ede-wrapper.js'))
            // This is where you add uglifying etc.
            .pipe(gulp.dest('dist'));
    })
    .bundle() // Create the initial bundle when starting the task
    .pipe(source('src/js/ede-wrapper.js'))
    .pipe(gulp.dest('dist'));
});

This is the error i get

[17:06:04] Starting 'browserify-With-Watch'...
[17:06:04] 'browserify-With-Watch' errored after 1.6 ms
[17:06:04] TypeError: Cannot read property 'cache' of undefined
    at watchify (d:\KHOBI\Source\ede_js_sdk\node_modules\watchify\index.js:13:27)
    at Gulp.<anonymous> (d:\KHOBI\Source\ede_js_sdk\gulpfile.js:55:20)
    at module.exports (d:\KHOBI\Source\ede_js_sdk\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (d:\KHOBI\Source\ede_js_sdk\node_modules\gulp\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (d:\KHOBI\Source\ede_js_sdk\node_modules\gulp\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (d:\KHOBI\Source\ede_js_sdk\node_modules\gulp\node_modules\orchestrator\index.js:134:8)
    at C:\Users\hasithm\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
    at process._tickCallback (node.js:355:11)
    at Function.Module.runMain (module.js:503:11)
    at startup (node.js:129:16)

Hope this is not something wrong with the watchify version that I use

Note: I have used gulp-browserify to browserify


Solution

  • Note: I have used gulp-browserify to browserify

    You should use browserify directly here, not gulp-browserify.

    watchify expects a browserify instance but you're giving it a stream created by gulp-browserify.