Watchify only watching single file - babel + react

[melbourne2991]

I'm trying to use watchify and it only seems to trigger an update if I edit /frontend/src/js/index.js

/*
Front End / Server Deps
 */
var gulp = require('gulp');
var browserify = require('browserify');
var reactify = require('reactify');
var babelify = require('babelify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sass = require('gulp-sass');
var concat = require("gulp-concat");
var sourcemaps = require("gulp-sourcemaps");


/*
Server Deps
 */
var babel = require("gulp-babel");

var _frontendJs = function() {
    var bundler = watchify(browserify({
        cache: {},
        entries: [__dirname + '/frontend/src/js/index.js'],
        debug: true
    }));

    var bundle = function() {
        console.log('Updating bundle...')

        return bundler.bundle()
            .pipe(source('bundle.js'))
            .pipe(gulp.dest(__dirname + '/frontend/dist'))
    }

    bundler.transform(babelify);
    bundler.on('update', bundle);

    return bundle();
};

var _frontendSass = function () {
    gulp.src(__dirname + '/frontend/src/sass/app.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(concat('app.css'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(__dirname + '/frontend/dist'));
}

var _frontendHtml = function() {
    gulp.src(__dirname + '/frontend/src/**/*.html')
        .pipe(gulp.dest(__dirname + '/frontend/dist'));
};

var _serverJs = function () {
  return gulp.src(__dirname + '/server/src/**/*.js')
    .pipe(sourcemaps.init())
    // .pipe(concat('server.js'))
    .pipe(babel())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(__dirname + '/server/dist'));
};


/*
Register Tasks
 */
gulp.task('server-js', _serverJs);
gulp.task('sass', _frontendSass);
gulp.task('frontend-html', _frontendHtml);
gulp.task('frontend-sass', _frontendSass);

/*
Watchers
 */
gulp.task('watch-server', function() {
    gulp.watch(__dirname + '/server/src/**/*.js', ['server-js'])
});

gulp.task('watch-frontend', function() {
    _frontendJs();
    _frontendHtml();
    _frontendSass();

    gulp.watch(__dirname + '/frontend/src/**/*.html', ['frontend-html']);
    gulp.watch(__dirname + '/frontend/src/sass/**/*.scss', ['frontend-sass']);
});

gulp.task('watch', ['watch-server', 'watch-frontend']);
gulp.task('default', ['watch']);

package json

{
"name": "Core",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "Proprietary",
"devDependencies": {
"gulp-sourcemaps": "^1.5.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"babelify": "^6.1.2",
"reactify": "^1.1.1",
"watchify": "^3.2.1",
"gulp-babel": "^5.1.0",
"gulp-concat": "^2.5.2",
"gulp-sass": "^2.0.1"
},
"dependencies": {
"browserify": "^10.2.3"
}
}

[zertosh]

your code looks reasonable. can you provide a repro case?

[melbourne2991]

Hi @zertosh thanks for getting back to me. What else would be helpful for reproduction?

Added package.json with version info if that helps

[jbmusso]

Greetings. I'm having the same issue (only triggers from entry point) with watchify v3.2.2, which automatically gets installed because of the npm carret ^ in the package.json (default npm behavior). Downgrading and forcing the dependency to strict v3.2.1 fixes the issue.

I'm basically using the same setup (watchify + babel), but via the CLI.

package.json (relevant parts):

{
  "scripts": {
    "watch:js": "watchify src/js/index.js --extension=.jsx -t [ babelify --only *.jsx ] -t brfs -o 'exorcist www/js/index.js.map > www/js/index.js' -v -d"
  }

...

  "devDependencies": {
    "babel-runtime": "^5.4.7",
    "babelify": "^6.1.2",
    "brfs": "^1.2.0",
    "browserify": "^10.2.3",
    "exorcist": "^0.4.0",
    "gulp": "^3.8.5",
    "gulp-sass": "^1.3.3",
    "watch": "^0.16.0",
    "watchify": "^3.2.1"
  }
}

Temp fix is to force watchify to 3.2.1:

    "watchify": "3.2.1"

(I have other npm scripts watching files via watch v0.16.0, though I believe this should not conflict.)

I can provide more information if needed.

[zertosh]

What would be ideal is a repo I can clone with a minimum amount of code that I can run that exhibits the problem.

[melbourne2991]

@jbmusso Looks like I still have the issue on 3.2.1
EDIT: sorry my mistake- this does indeed fix the issue!

[zertosh]

@melbourne2991 Can you provide me with a way to reproduce the issue? I don't know why 3.2.2 would cause what you're describing.

[igordezky]

@zertosh
I have this issue as well using grunt-browserify with watchify enabled, with grunt-contrib-watch. ie:

grunt.initConfig({
browserify: {
options: {
watch: true
},
...
},
watch: {
...
}
});

$ grunt browserify watch

Downgrading watchify to 3.2.1 fixed the issue

[zertosh]

@igordezky Can you open a new issue with steps/repo for me to reproduce?

[igordezky]

@zertosh, My issue appears to be related to grunt-browserify and recent watchify. The issue is fixed by updating to grunt-browserify 4.0.0, which contains jmreidy/grunt-browserify#341

My issue is resolved, sorry for the confusion

[zertosh]

@igordezky No worries