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

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

2 个答案: