Gulp: ES2017 async / await functions with Gulp

[xmlking]

Env:
Gulp 4
Node 7.6.0

Can I use ES2017 async functions with Gulp?

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

gulp.task('sumo', async ()  => {
         await delay(3000);
        return "success"
});

[cedx]

Yes you can :)

[contra]

yep, works fine - async functions are just functions that return promises, which is supported

[xmlking]

I did some testing.
this works but , as shown below, can I get the resultreturned by all sub-tasks?
can I use await taker.series('serpar2'); to force to wait till composite task is complete and print console.log('lastRun for test1', taker.lastRun('test1'))?

import * as Undertaker from 'undertaker';

const taker = new Undertaker();

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
taker.task('test1', async () => {
    await delay(1000);
    console.log('in test1 ...');
    return 1;
});
taker.task('test2', async () => {
    console.log('in test2 ...');
    return 2;
});
taker.task('test3', async () => {
    console.log('in test3 ...');
    return 3;
});

taker.task('test4', async () => {
    await delay(1000);
    console.log('in test4 ...');
    return 4;
});
taker.task('test5', async () => {
    console.log('in test5 ...');
    return 5;
});
taker.task('test6', async () => {
    await delay(1000);
    console.log('in test6 ...');
    return 6;
});

taker.task('ser', taker.series('test1', 'test2'));
taker.task('par', taker.parallel( 'test3', 'test4', 'test5'));
taker.task('serpar', taker.series('ser', 'par'));
taker.task('serpar1', taker.series(taker.series('test1', 'test2'), taker.parallel('test3', 'test4', 'test5'), 'test6'));
taker.task('serpar2', taker.parallel(taker.series('test1', 'test2'), taker.parallel('test3', 'test4', 'test5'),'test6'));

(async () => {
    try {
        // let tree = taker.tree({deep: true});
        // console.log('tree', tree);

        /** case 1 **/
        // const myTask = taker.task('serpar2')((aaa) => {
        //     // prints as undefined
        //     console.log('aaa', aaa);
        //     // prints as expected
        //     console.log('lastRun for test3', taker.lastRun('test3'))
        // });



        /** case 2 **/
        const myTask2 = taker.task('serpar2');
        const result = await myTask2();
        // prints as undefined
        console.log('result', result);
        // prints as undefined
        console.log('lastRun for test1', taker.lastRun('test1'))

    } catch (err) {
        console.log('Error:',err)
    }
})();

case1 output

ts-node src/run2.ts 
in test3 ...
in test5 ...
in test6 ...
in test1 ...
in test4 ...
in test2 ...
aaa null
lastRun for test3 1490314154963

case2 output

ts-node src/run2.ts 
in test3 ...
in test5 ...
result undefined
lastRun for test1 undefined
in test6 ...
in test1 ...
in test4 ...
in test2 ...

[contra]

@xmlking

result = await gulp.task('task name')()

or just use named functions, you don't have to register everything as a task but if you do you can still name them and call them like normal JS as you please

[xmlking]

@contra result = await gulp.task('task name')() working if it is a simple register function like test1 and test4 above. When I tryed same with tasks with dependency e.g., serpar1, serpar2 I am getting undefined

[chharvey]

yep, works fine - async functions are just functions that return promises, which is supported

— cite: @contra

That seems pretty easy. Would you consider adding that explicit example to the docs?

[contra]

@chharvey We cover promises already here https://github.com/gulpjs/gulp/blob/master/docs/API.md#return-a-promise

an async function is the same thing, we could add another example though.

[chharvey]

@contra Thank you. It would go something like this:

var util = require('util');
var del = require('del');

gulp.task('clean', async function() {
  try {
    await util.promisify(del)(['.build/']);
  } catch (e) {
    throw e;
  }
});

[phated]

@chharvey no, you don't need to try/catch and rethrow. The async promise wrapper already catches the promise

[phated]

This thread promotes a lot of old patterns that we don't suggest anymore (registering with strings vs using named functions, etc) so don't follow anything here. We're working on updated docs that explain async/await usage in more detail.

[Evertcolombia]

I had been one day with this problem and finally could resolved it

gulp.task('scripts', done => {
browserify(paths.scripts.src)
.transform(babel, { presets: ['env'] })
.bundle()
.pipe(source('index.js'))
.pipe(rename('app.js'))
.pipe(gulp.dest(paths.scripts.dest));
done();

});

Gulp 4 is a new headache jejeje

[phated]

@Evertcolombia what you wrote is completely incorrect.