Browserify task only runs once in container

[MrMMorris]

I haven't been able to find anything helpful elsewhere so I have come here 😅

I am running gulp in a Docker container and my compass task seems to be working. It compiles on every change. My browserify task, however, only builds the first time:

[19:14:41] Using gulpfile /usr/share/nginx/html/gulpfile.js
[19:14:41] Starting 'default'...
Building APP bundle
Building TEST bundle
Building VENDORS bundle
Compiling COMPASS
Copying index.html and assets
[19:14:41] Finished 'default' after 70 ms
[19:14:42] specs.js was reloaded.
TEST bundle built in 261ms
[19:14:42] Live reload server listening on: 35729
VENDORS bundle built in 259ms
index.html and assets copied in 745ms
index.html and assets copied in 884ms
index.html and assets copied in 1395ms
index.html and assets copied in 1583ms
index.html and assets copied in 1855ms
COMPASS compiled in 2459ms
[19:14:57] app.js was reloaded.                  <---- rebuild on startup??
APP bundle built in 16003ms

$ touch client/src/styles/sass/styles.scss       <---- compiles the first time

Compiling COMPASS
    write src/styles/css/styles.css

COMPASS compiled in 3748ms

$ touch client/src/js/components/Carousel.js     <---- does not result in rebuild (and never does)

$ touch client/src/styles/sass/styles.scss       <---- compiles the second time (and all subsequent times)

Compiling COMPASS
    write src/styles/css/styles.css

COMPASS compiled in 1078ms

gulpfile.js:

## Works Everytime ##

var compassTask = function(options) {
  if (options.development) {
    // unminified development version
    var run = function() {
      var start = new Date();
      console.log('Compiling COMPASS');

      gulp.src(options.src)
        .pipe(compass(options.config))
        .on('error', function(error) {
          console.log(error);
          this.emit('end');
        })
        .pipe(rename('css/styles.css'))
        .pipe(gulp.dest('build/styles'))
        .pipe(notify(function() {
          console.log('COMPASS compiled in ' + (Date.now() - start) + 'ms');
        }));
    };
    run();
    gulp.watch(options.src, run);
  }
  else {
    // minified production version
    gulp.src(options.src)
      .pipe(compass(options.config))
      .on('error', function(error) {
        console.log(error);
        this.emit('end');
      })
      .pipe(cssmin())
      .pipe(rename('css/styles.css'))
      .pipe(gulp.dest(options.dest));
  }
};

## Works Once ##

var browserifyTask = function(options) {
  // Our app bundler
  var appBundler = browserify({
    entries: [options.src], // Only need initial file, browserify finds the rest
    transform: [reactify], // We want to convert JSX to normal javascript
    debug: options.development, // Gives us sourcemapping - AND HUGE FILE SIZE,
                                // set to false if runs too slow
    cache: {}, packageCache: {}, fullPaths: options.development // Requirement of watchify
  });

  // We set our dependencies as externals on our app bundler when developing
  (options.development ? dependencies : []).forEach(function(dep) {
    appBundler.external(dep);
  });

  // The rebundle process
  var rebundle = function() {
    var start = Date.now();
    console.log('Building APP bundle');
    appBundler.bundle()
      .on('error', gutil.log)
      .pipe(source('app.js'))
      .pipe(gulpif(!options.development, streamify(uglify())))
      .pipe(gulp.dest(options.dest))
      .pipe(gulpif(options.development, livereload()))
      .pipe(notify(function() {
        console.log('APP bundle built in ' + (Date.now() - start) + 'ms');
      }));
  };

  // Fire up Watchify when developing
  if (options.development) {
    appBundler = watchify(appBundler);
    appBundler.on('update', rebundle);
  }

  rebundle();
};



gulp.task('default', function() {

## Works Everytime ##
  compassTask({
    development: true,
    src: 'src/styles/**/*.scss',
    dest: 'build/styles',
    config: {
      config_file: 'src/styles/config.rb',
      css: 'src/styles/css',
      sass: 'src/styles/sass'
    }
  });

  ## Works Once ##
  browserifyTask({
    development: true,
    src: './src/js/app.js',
    dest: './build/js'
  });
});

Now this very well may be something with my docker setup (as everything works as it should outside of Docker), but considering how straight forward the Docker setup is, and that Compass works, I thought I would ask here to make sure.

I had initially thought it might be something to do with the ./ path used in the browserify task vs the compass path, but that doesn't change anything..

Any ideas on why browserify is only building once?

Let me know if you need more info. I'm not a node dev, but I will help clarify where I can 😐

[zertosh]

@MrMMorris It's a watchify issue (see browserify/watchify#162 (comment)). I'm working on a fix. It's essentially a problem with the watcher running over NFS.

[zertosh]

cache: {}, packageCache: {}, fullPaths: options.development // Requirement of watchify

@MrMMorris: Also, since watchify v2.5.0 fullPaths is optional 😛

[MrMMorris]

@zertosh YESSSS! I'm so glad you knew what it was 😄

I was actually just starting to consider it might be something with the filesystem, but I'm glad I don't have to spam IRC anymore 😅

I eagerly await the release!

[zertosh]

@MrMMorris I just wrapped up the last bug in the 2.x series. I'm starting to work on 3.0.0, which will have the fix for your problem. Feel free to track the progress in browserify/watchify#168

[zertosh]

@MrMMorris, I just published watchify 3.0.0. Checkout the docs on how to turn on polling, and that'll solve your container watching problem.

[MrMMorris]

@zertosh thanks you beautiful human! Alas, I am a js noob 👶 and I'm not sure exactly how to set the poll option. Is it like this? Or do I need a function?

var browserifyTask = function(options) {
  // Our app bundler
  var appBundler = browserify({
    entries: [options.src], // Only need initial file, browserify finds the rest
    transform: [reactify], // We want to convert JSX to normal javascript
    debug: options.development, // Gives us sourcemapping - AND HUGE FILE SIZE,
                                // set to false if runs too slow
    cache: {}, packageCache: {}
  });


appBundler = watchify(appBundler, {poll: true});
appBundler.on('update', rebundle);

Thanks again for your help.

[zertosh]

@MrMMorris no problem.

what you have looks correct. If you start to notice that it's taking up too many resources, then use the ignoreWatch option to turn off watching for things you know don't change much - like node_modules.

[MrMMorris]

shoot, doesn't look like it's working 😞

appBundler = watchify(appBundler, {poll: true, ignoreWatch: true});

compass compiles every time, app only built once

[MrMMorris]

let me double-check that I have the new version running. But I would assume that adding the options would error on old versions?

[MrMMorris]

Oh, that might be it actually, ignore my rambling for now 😉

[MrMMorris]

FRIGGIN YES

❤️

[jmm]

Thanks @zertosh!