使用 main-bower-files

它抓取您项目的bower.json中定义的所有Bower包的生产（主）文件，并将它们用作您的任务的gulp src。 / b>

将其集成到您的gulp文件中：

  var mainBowerFiles = require（'主亭子-文件）; 
 

我制作了抓取所有生产文件的任务，过滤css / js / fonts并在公共文件夹在他们各自的子文件夹（css / js / fonts）。

以下是一个例子：

  var gulp = require（'gulp'）; 

 //定义插件
 var flatten = require（'gulp-flatten'）; 
 var gulpFilter = require（'gulp-filter'）; // 4.0.0+ 
 var uglify = require（'gulp-uglify'）; 
 var minifycss = require（'gulp-minify-css'）; 
 var rename = require（'gulp-rename'）; 
 var mainBowerFiles = require（'main-bower-files'）; 

 //定义路径变量
 var dest_path ='www'; 
 //从bower_components获取库文件，缩小并推入/ public 
 gulp.task（'publish-components'，function（）{

 var jsFilter = gulpFilter（' ** / *。js'）; 
 var cssFilter = gulpFilter（'** / *。css'）; 
 var fontFilter = gulpFilter（['** / *。eot'，'** /*.woff'，'** / *。svg'，'** / *。ttf']）; 

 return gulp.src（mainBowerFiles（））

 //从bower_components获取供应商js文件，缩小并推入/ public 
 .pipe（jsFilter）
 .pipe（gulp.dest（dest_path +'/ js /'））
。 pipe（uglify（））
 .pipe（重命名（{
后缀：.min
}））
 .pipe（gulp.dest（dest_path +'/ js / '））
 .pipe（jsFilter.restore（））

 //从bower_components获取供应商的css文件，缩小并推入/ public 
 .pipe（cssFilter）
 .pipe（gulp.dest（dest_path +'/ css'））
 .pipe（minifycss（））
 .pipe（重命名（{
后缀：.min
}））
 .pipe（gulp.dest（dest_path +'/ css'））
 .pipe （cssFilter.restore（））

 //从bower_components获取供应商字体文件并推入/ public 
 .pipe（fontFilter）
 .pipe（flatten（））
 .pipe（gulp.dest（dest_path +'/ fonts'））; 
}）; 
 

I am trying to write a gulp task that does a few things

1. Install the Bower dependencies
2. Concat those dependencies into one file in the order of the dependencies

I was hoping to do this without having to specify the paths to those dependencies. I know there is the command bower list --paths but I am unsure of if it is possible to tie it together.

Any thoughts?

Edit

So I am trying to use the gulp-bower-files and I am getting an eaccess error and its not generating the concatenated file.

gulpfile.js

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

gulp.task("libs", function(){
    bower_files()
    .pipe(concat('./libs.js'))
    .pipe(gulp.dest("/"));
});

bower.json

{
  "name": "ember-boilerplate",
  "version": "0.0.0",
  "dependencies": {
    "ember": "1.6.0-beta.1",
    "ember-data": "1.0.0-beta.7"
  }
}

and I keep coming across this error

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: EACCES, open '/libs.js'

Use main-bower-files

It grabs all production (main) files of your Bower packages defined in your project's bower.json and use them as your gulp src for your task.

integrate it in your gulpfile:

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

I made this task that grabs all production files, filters css/js/fonts and outputs them in the public folder in their respective subfolders (css/js/fonts).

Here's an example:

var gulp = require('gulp');

// define plug-ins
var flatten = require('gulp-flatten');
var gulpFilter = require('gulp-filter'); // 4.0.0+
var uglify = require('gulp-uglify');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var mainBowerFiles = require('main-bower-files');

// Define paths variables
var dest_path =  'www';
// grab libraries files from bower_components, minify and push in /public
gulp.task('publish-components', function() {

        var jsFilter = gulpFilter('**/*.js');
        var cssFilter = gulpFilter('**/*.css');
        var fontFilter = gulpFilter(['**/*.eot', '**/*.woff', '**/*.svg', '**/*.ttf']);

        return gulp.src(mainBowerFiles())

        // grab vendor js files from bower_components, minify and push in /public
        .pipe(jsFilter)
        .pipe(gulp.dest(dest_path + '/js/'))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest(dest_path + '/js/'))
        .pipe(jsFilter.restore())

        // grab vendor css files from bower_components, minify and push in /public
        .pipe(cssFilter)
        .pipe(gulp.dest(dest_path + '/css'))
        .pipe(minifycss())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest(dest_path + '/css'))
        .pipe(cssFilter.restore())

        // grab vendor font files from bower_components and push in /public
        .pipe(fontFilter)
        .pipe(flatten())
        .pipe(gulp.dest(dest_path + '/fonts'));
});