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中的依賴項並返回它。 然后我進行concat / uglify並將其發送到我的JS build文件夾（然后，主要的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文件