Failing to get updated contents of a file after gulp stream completes

Question

I'm trying to bump the version number in my package.json file, then use the update version number to create a new git tag. Whenever I run the bump task, the git tag created was of the old version number, not the bumped one.

I'm using the gulp-load-plugins to register all my plugins and map them to $, rather then having to declare them by hand. So instead of var bump = require("gulp"); ... bump() I just use $.bump().

Attempt #1
My initial code looked like this.

var gulp = require("gulp");
var $ = require('gulp-load-plugins')();

gulp.task('bump', function() {
  gulp.src(['package.json'])
    .pipe($.bump())
    .pipe(gulp.dest('./'));

  var config = require('./package.json');
  $.git.tag('v' + config.version, 'Version message');
  $.util.log("tag added: " + config.version);
});

Attempt #2
Some googling made it seem like it was an async vs sync issue, so after reading this blog post I created two tasks to test this out.

tag depended on bump completing, with the big change being the return statement in the bump task. The log output shows them being executed in order, but the issue remains.

var gulp = require("gulp");
var $ = require('gulp-load-plugins')();

gulp.task('bump', function() {
  return gulp.src(['package.json'])
    .pipe($.bump())
    .pipe(gulp.dest('./'));
});    

gulp.task('tag',['bump'], function() {
  var config = require('./package.json');
  $.git.tag('v' + config.version, 'Version message');
  $.util.log("tag added: " + config.version);
});

Attempt #3
I also tried moving the git tag logic into the .on('close') event from bump, but that doesn't solve my problem either.

var gulp = require("gulp");
var $ = require('gulp-load-plugins')();

gulp.task('bump', function() {
  return gulp.src(['package.json'])
    .pipe($.bump())
    .pipe(gulp.dest('./'))
    .on('close', function () {
      var config = require('./package.json');
      $.git.tag('v' + config.version, 'Version message');
      $.util.log("tag added: " + config.version);
    });
});

Attempt #4
Also tried Mangled-Deutz suggestion to not use require('package.json') since require might be caching the result. I tried using node file system's readFile() method, but this too was not successful.

var gulp = require("gulp");
var $ = require('gulp-load-plugins')();
var fs = require('fs');

gulp.task('bump', function() {
  gulp.src(['package.json'])
    .pipe($.bump())
    .pipe(gulp.dest('./'));

  fs.readFile("./package.json", {encoding: 'utf-8'}, function (err, data) {
    var config = JSON.parse(data);
    $.git.tag('v' + config.version, 'Version message');
    $.util.log("tag added: " + config.version);
  });
});

So any idea where the problem is? Is it still an async vs sync issue and I'm doing something incorrectly? I'd prefer to have the logic in just one task, but if they only way to accomplish this is two, then so be it.

I'm new to gulp and how streams work, so if my title doesn't make sense let me know. I'd like to update it so it is more relevant to search results.

Thanks in advance.

Answer 1

You are quite likely bitten by the fact that require uses caching...

Your require('package.json') call likely returns you the (cached) version prior to bump() action. You should rather try reading it directly (eg: avoiding require).

UPDATE

The following does work as expected - as suggested above:

var gulp = require("gulp");
var $ = require('gulp-load-plugins')();
var fs = require('fs');

gulp.task('bump', function() {
  return gulp.src(['package.json'])
    .pipe($.bump())
    .pipe(gulp.dest('./'));
});

gulp.task('tag', ['bump'], function() {
// This doesn't work, because require uses caching
//  var config = require('./package.json');
  var config = fs.readFileSync('./package.json', 'utf-8');
  console.warn(config);
});