Q: chain callbacks - node.js

Question

I'm trying to run callbacks in specific order.
Basically I have a gulp task that receives an array with four CSS paths. I need minify each file and print status about progress. Something like that:
Minifying file AAA.css: OK
Minifying file BBB.css: OK
Minifying file CCC.css: FAIL
Minifying file DDD.css: OK
First I write Minifying file AAA.css, so I run some gulp methods, and on("end") or on("error") it should complete the phrase with OK\n or FAIL\n, respectively.
My problem is that it is printing somethink like:
Minifying file AAA.css: Minifying file BBB.css: {...} DDD.css: Finished {...}.
OK
OK
FAIL
OK
This is how I trying to do:
gulp.task("watch", function () {
var files = [ "AAA.css", "BBB.css", "CCC.css", "DDD.css" ];
var promise = Q();
underscore.each(files, function (file) {
minify(promise, file);
});
return promise;
});
function minify(promise, file) {
promise.then(function() { write("Minifying " + file + ": ") });
promise.then(function() {
return gulp.src(file).{...}
.on("error", function() { write("FAIL"); })
.on("end", function() { write("OK"); })
});
}
I tried use Q.defer() and create a promise for each file in loop too, but without success... Like:
function minify(file) {
var promise = Q();
promise.then(function() { write("Minifying " + file + ": ") });
promise.then(function() {
return gulp.src(file).{...}
.on("error", function() { write("FAIL"); })
.on("end", function() { write("OK"); })
});
return promise();
}
What should I do? Maybe Promise or Deferred will not solve my problem?
Edit: my current code is http://pastebin.com/tSaXH1iF

Answer 1

The problem is the usual async problem: gulp.src() will finish long after you've printed your "Minifying...". The solution is to wait for it to finish before printing the "Minifying..." message:
function minify(file) {
var promise = Q();
promise.then(function() {
return gulp.src(file).{...}
.on("error", function() { write("Minifying " + file + ":FAIL"); })
.on("end", function() { write("Minifying " + file + ":OK"); })
});
return promise();
}
There's really no simple way around it unless you want to use some fancy terminal trickery to move the cursor to the correct line to print "OK" or "FAIL".

Answer 2

building on slebetman's answer, I do not think you are building promises properly( unless gulp.src returns promise), Your code would work but with current state the promise has no effect.
with Q.defer you can promisify the pipe like:
function minify(file) {
var deferred = Q.defer();
gulp.src(file).{...}
.on("error", function(err) { write("Minifying " + file + ": FAIL"); deferred.reject(err);})
.on("end", function() { write("Minifying " + file + ": OK");deferred.resolve(); });
return promise();
}

Answer 3

I finally found the mistake. Basically, .then() will expect a "promise factory", instead of "promise instance".
I was incorrectly running the function minifyCSS(), instead of bind it to .then().
Minify CSS function: it was correct. I created a defer on it and return it promise.
var deferred = Q.defer();
gulp.src(...)
.pipe(...)
.on("end", ... deffered.resolve() ...);
return deferred.promise;
Before:
var promise = Q();
promise.then( ... start message ... );
promise.then(minifyCSS(file));
return promise;
After:
var promise = Q();
promise.then( ... start message ... );
promise.then(minifyCSS.bind(null, file));
return promise;
Note only the second .then() call on each example.
A small logical mistake. Gulp was executed instantly when I called minifyCSS() on first example (before), instead of execute after last .then() finished (like in after).