Gulp 4 bower install doesn't trigger finished

Question

I'm using gulp 4. When trying to install bower dependencies using gulp, the bower task never finishes. Both the example below actually install dependencies.

Example 1

var run = require('gulp-run');
gulp.task('bower', function(done) {
  run('./node_modules/.bin/bower install', {cwd: './temp'}).exec(function(err){
    if (err) throw err;

    done();
  });
});

This never finishes. It just hangs.

Example 2

var bower = require('gulp-bower');
gulp.task('bower', function() {
  return bower({cwd: './temp'});
});

This one throws The following tasks did not complete: bower. Did you forget to signal async completion? after it completes. But since it throws, I can't continue my gulp.series.

Answer 1

You can solve this by using the regular 'bower' package, rather than 'gulp-bower'. There's a programmatic API for bower that can be used with native promises in order to work with Gulp 4.

For example:

var gulp = require('gulp'),
    bower = require('bower');

gulp.task('bower:install', function() {
    return new Promise((resolve) => {
        bower.commands.install(undefined, undefined, {
            cwd: './temp'
        }).on('end', resolve);
    });
});

You'll notice that I'm using ES6 arrow syntax for the anonymous function. You can use ES6 for gulp as long as your gulpfile is named 'gulpfile.babel.js' and you have 'babel-core' installed alongside gulp (local install is fine).