如何使用Gulp安装Bower

Question

I want to do something like this when I run gulp:

1.use "gulp-bower" to install all dependency from bower.json.

2.Use "main-bower-files" to find all bower component and concat them into one file

var gulp = require('gulp');
var bower = require('gulp-bower');
var mainBowerFiles = require('main-bower-files');

gulp.task('default', function () {
    return bower()
        .pipe(gulp.src(mainBowerFiles()))
        .pipe(concat('lib.js'))
        .pipe(gulp.dest('static/lib'));
});

but this will give Error: Bower components directory does not exist first, then download the bower components after. How can you download the components first then run main-bower-files

Answer 1

gulp-bower runs asynchronously, so it moves along to the next part of the pipe before the files have finished downloading. To solve this, you'll need to separate your tasks:

var gulp = require('gulp');
var bower = require('gulp-bower');
var concat = require('gulp-concat');
var mainBowerFiles = require('main-bower-files');

gulp.task('bower', function () {
    return bower();
});

gulp.task('bower-concat', ['bower'], function () {
    return gulp.src(mainBowerFiles())
        .pipe(concat('lib.js'))
        .pipe(gulp.dest('static/lib'));
});

gulp.task('default', ['bower-concat']);