Gulp：下载所有库后如何连接凉亭组件？答案

【问题标题】：Gulp: How to concat bower components after all libs been download?Gulp：下载所有库后如何连接凉亭组件？
【发布时间】：2015-06-18 18:41:08
【问题描述】：

我正在使用“gulp-bower”来自动安装 bower.json 中的所有库，我还希望 gulp 在下载后缩小所有库。这是我的代码：

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

gulp.task('bower', function() {
    return bower()
        .pipe(gulp.dest("./bower_components"))
});

gulp.task('minifyBower', function() {
    return gulp.src(mainBowerFiles())
        .pipe(concat('lib.js'))
        .pipe(gulp.dest('dist'))
});

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

如果我运行它，我会收到此错误。

Starting 'bower'...
[11:23:06] Using cwd:  /Users/yizhou/Documents/Yi
[11:23:06] Using bower dir:  ./bower_components
[11:23:06] Starting 'minifyBower'...
[11:23:06] 'minifyBower' errored after 1.53 ms
[11:23:06] Error: Bower components directory does not exist at /Users/yizhou/Documents/Yi/bower_components
    at Error (native)
    at module.exports (/Users/yizhou/Documents/Yi/node_modules/main-bower-files/lib/index.js:76:71)
    at Gulp.<anonymous> (/Users/yizhou/Documents/Yi/gulpfile.js:16:21)
    at module.exports (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
    at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
    at process._tickCallback (node.js:355:11)
    at Function.Module.runMain (module.js:503:11)
[11:23:06] bower cached git://github.com/jquery/jquery.git#2.1.4
[11:23:06] bower validate 2.1.4 against git://github.com/jquery/jquery.git#~2.1.4
[11:23:07] bower install jquery#2.1.4
[11:23:08] Finished 'bower' after 2 s

【问题讨论】：

标签： gulp bower

【解决方案1】：

gulp 默认异步运行每个任务，以提高性能。如果要按顺序运行，需要显式声明依赖：

gulp.task('minifyBower', ['bower'], function() { /* ... */ });

现在minifyBower 在bower 运行之前不会运行。如果你需要更复杂的东西，你应该使用run-sequence之类的东西。

【讨论】：