Gulp task - unable to set variable value

Question

I'm using git-rev,gulp-header and run-sequence and trying to add some info - as well as - git commit number automatically to app.js file during building process.

here's the code I have so far:

var runSequence = require('gulp-run-sequence');
var git = require('git-rev');
var header = require('gulp-header');
var pkg = require('./info.json');

var paths = {addHeader: ['./www/js/app.js'], ...}

var commit, timestamp;
function getGitInfo() {
    git.short(function (str) {
        commit = str;
        console.log(str);
    });
};

var banner = ['"commit":"' + commit + '",',
    '"timestamp":"' + timestamp + '",',
    '"appVersion":"<%= pkg.appVersion %>",',
    '"appReleaseDate":"<%= pkg.appReleaseDate %>"',
    '};\n',
    ''].join('\n');

gulp.task('get-git-info', getGitInfo());
gulp.task('add-header', function () {
    return gulp.src(paths.addHeader)
        .pipe(header(banner, {pkg: pkg}))
        .pipe(gulp.dest('./www-dev/js/'))
});

gulp.task('build', function (){
  runSequence('get-git-info','add-header');
})

the console result is right, I have the commit number, but in app.js all I get is undefined:

aboutPage={
"appVersion":"5.0.0",
"appReleaseDate":"10/02/2016",
"commit":"undefined",
"timestamp":"undefined"
};

I am talking about commit, and NOT timestamp. I'm going to worry about timestamp later.

Any idea what am I doing wrong here?

thanks

Answer 1

There are a couple of things wrong with your Gulpfile:

1. Your banner variable is initialized before any of your tasks are even defined, let alone have been executed. That means that commit is still undefined when you initialize banner.
2. gulp.task expects a function as the task body. However the task body for get-git-info in your Gulpfile is getGitInfo(). That means you execute the getGitInfo function and assign the return value of that function call as the task body of get-git-info. Which in your case is undefined.
3. Even if you had assigned the getGitInfo function itself as the task body (instead of its return value), it still wouldn't work because git.short() is asynchronous. That means that get-git-info returns and add-header is run before your callback function to git.short() is called with the commit-id.

Here's a solution that addresses all three of these problems:

function banner() {
    return [
        '"commit":"' + commit + '",',
        '"timestamp":"' + timestamp + '",',
        '"appVersion":"<%= pkg.appVersion %>",',
        '"appReleaseDate":"<%= pkg.appReleaseDate %>"',
        '};\n',
        ''
    ].join('\n');
}

gulp.task('get-git-info', function(done) {
    git.short(function (str) {
        commit = str;
        console.log(str);
        done();
    });
});

gulp.task('add-header', function () {
    return gulp.src(paths.addHeader)
        .pipe(header(banner(), {pkg: pkg}))
        .pipe(gulp.dest('./www-dev/js/'))
});

1. banner is now a function so the commit variable isn't accessed until it has been initialized.
2. getGitInfo is gone. Instead an anonymous function is used as the task body for get-git-info, so it's dead obvious that we are in fact assigning a function here.
3. The anonymous function accepts a callback done which is called once the commit-id is available. This signals to gulp that get-git-info is finished and that runSequence can proceed with the add-header task.