npm run production watches files

[jpresley23]

I'm setting up a build script for production for our project and used 'npm run production' as instructed README.md. I've noticed that results in watching files. Is there a way to use 'npm run production' without watching files? I also noticed that http://localhost:3000 is automatically opened in the browser, which is also not desirable for a production build.

[zachtownsend]

Does it work if you wrap the watch tasks in the default task in a !isProduction condition?

// Default gulp task
// Run build task and watch for file changes
gulp.task('default', ['build', 'browser-sync'], function() {
  // Log file changes to console
  function logFileChange(event) {
    var fileName = require('path').relative(__dirname, event.path);
    console.log('[' + 'WATCH'.green + '] ' + fileName.magenta + ' was ' + event.type + ', running tasks...');
  }
  if(!isProduction) {
    // Sass Watch
    gulp.watch(['assets/scss/**/*.scss'], ['sass'])
      .on('change', function(event) {
        logFileChange(event);
      });

    // JS Watch
    gulp.watch(['assets/javascript/custom/**/*.js'], ['javascript', 'lint'])
      .on('change', function(event) {
        logFileChange(event);
      });
  }

});

[jpresley23]

No it does't. I've also tried moving the if(!isProduction) to wrap the entire contents of the function to read

// Run build task and watch for file changes
gulp.task('default', ['build', 'browser-sync'], function() {

if(!isProduction) {
  // Log file changes to console
  function logFileChange(event) {
    var fileName = require('path').relative(__dirname, event.path);
    console.log('[' + 'WATCH'.green + '] ' + fileName.magenta + ' was ' + event.type + ', running tasks...');
  }


  // Sass Watch
  gulp.watch(['assets/scss/**/*.scss'], ['clean:css', 'sass'])
    .on('change', function(event) {
      logFileChange(event);
    });

  // JS Watch
  gulp.watch(['assets/javascript/custom/**/*.js'], ['clean:javascript', 'javascript', 'lint'])
    .on('change', function(event) {
      logFileChange(event);
    });
}

with no luck.

[jpresley23]

The way we got around this was to set a separate gulp task such as

gulp.task('set-env-prod', setEnvProd);
gulp.task('production', ['set-env-prod', 'clean', 'build']);

Where the setEnvProd method sets the flag for production.

The npm run production script is changed to 'gulp production'.

[olefredrik]

I agree that npm run production should not watch files and open http://localhost:3000 in browser. Feel free to open a pull request.

[dDondero]

I need to finish a site that I have been working on. Is there a working fix to run production, or a workaround? I have used an earlier version of foundationpress (v2.4.0) and had no issues with this.

Thanks

[dDondero]

Still nothing here?

[wjdennen]

@dDondero I am having the same problem. Did you ever solve this?

[jpresley23]

I haven't had time to make a commit with the workaround. Feel free to take the pointers we've made and roll your own. We've moved to an alternate starter theme so I haven't been as motivated to extract our solution into a commit.

[dDondero]

Sorry @wjdennen, I don't have much experience with gulp/node so I weren't able to troubleshoot. I'm still waiting for an working update.

I was able to run "npm run build", and then I copied over the files I needed for the theme to work. It's not optimal, performance-wise, but it's working.

It's too bad there isn't a "stable" version of FP, and a few more updates (at least for errors/bugs). I'm reluctant on basing my projects on it because of this. @jpresley23 what starter-theme did you go for? Still Foundation-based?

[wjdennen]

@dDondero : This seems to work:

npm run package

[dDondero]

Haha, @wjdennen well this helped me out a great deal. Thanks.

The earlier version of FoundationPress I used created a new theme-folder with only the files needed, but that doesn't matter as long as the published site is working as it should.

You can check out my project here if you'd like: ikuben.no Pretty simple looking, but there are a total of 8 custom post types for different content types and other customization.

[jklegseth]

@wjdennen has the correct solution to this.

npm run package will actually do a "production" build and nothing else. It is an alias for gulp package --production, which calls the build task but not browser-sync or watch.

npm run production doesn't work as expected because it is simply an alias for gulp --production, which is equal to gulp default --production: that calls the build task, then the browser-sync task, then logs file changes to the console and finally adds watches for CSS and JS.

I think the best way to fix this would be to change the package.json scripts from:
"production": "gulp --production"
to
"production": "gulp package --production"

...and then just remove the package property in that section.