Gulp 找到我的 Bower 组件并连接它们

Question

我有一个愚蠢的问题，我想：我正在尝试做一个 Gulp 任务，找到我的 Bower 组件（比如说，在默认情况下bower_components 文件夹）并在我安装新组件时将它们连接到一个文件（即 js/libs.js）。

我尝试使用 main-bower-files 来实现这一点，基于文档中的示例：

gulp.task('jslibs', function() {
 return gulp.src(mainBowerFiles()) // SyntaxError: Unexpected end of input
        .pipe(concat('libs.js'))
        .pipe(uglify())
        .pipe(gulp.dest('js'))
});

所以当我运行这个任务时它返回一个语法错误，我不知道为什么。我尝试传递一些选项，但没有成功。

有什么想法吗？

Answer 1

我没有找到使用 main-bower-files 的解决方案。所以我尝试了另一个包：bower-files (require('bower-files')();).

工作任务如下所示：

gulp.task('js-libs', function() {    
   gulp.src(lib.ext('js').files)
    .pipe(concat('libs.js'))
    .pipe(uglify())
    .pipe(gulp.dest('js'));
});

它只需要在 Bower 中设置为依赖项的所有文件并 returns 它。然后我 concat/uglify 并将其发送到我的 JS 构建文件夹（然后，主要 JS 任务正在监视更改并将其添加到主 JS 文件，concat/uglify 并将其发送到 dist.

Answer 2

首先安装您的要求：

npm install gulp gulp-concat main-bower-files -D

那么你的 gulpfile.js 可能看起来像：

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

gulp.task('bower', function() {
    return gulp.src(mainBowerFiles('**/*.css' ,{debugging:true}))
        .pipe (concat ("vendor.js"))
        .pipe(gulp.dest("./app/js/vendor/"));
});

然后就这样做：

gulp bower

Answer 3

我遇到了同样的问题。这可能是问题所在。您没有 bower.json 文件或您有一个空的 .bowerrc 文件

Gulp 找到我的 Bower 组件并连接它们

Gulp find my Bower components and concat them

javascript

gulp

bower