Wie kann ich Bower mit Gulp.js integrieren?

Question

Ich versuche, einen Schluck Aufgabe zu schreiben, die ein paar Dinge

1. die Bower Concat diese Abhängigkeiten in einer Datei in der Reihenfolge der Abhängigkeiten installieren tut Abhängigkeiten

Ich hatte gehofft, zu tun Sie dies, ohne die Pfade zu diesen Abhängigkeiten angeben zu müssen. Ich weiß, dass es den Befehl bower list --paths gibt, aber ich bin unsicher, ob es möglich ist, es zusammen zu binden.

Irgendwelche Gedanken?

bearbeiten

So versuche ich die gulp-bower-files und ich erhalte einen eAccess Fehler zu verwenden, und es ist nicht die verkettete Datei zu erzeugen.

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" 
    } 
} 

und ich auf diesen Fehler kommen immer

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

Answer 1

Verwenden main-bower-files

Er erfasst alle Produktions- (Haupt-) Dateien Ihrer Bower-Pakete, die in bower.json Ihres Projekts definiert sind, und verwendet sie als Ihren Quellcode für Ihre Aufgabe.

integrieren Sie es in Ihrem gulpfile:

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

ich diese Aufgabe gemacht, die alle Produktionsdateien packt, filtert css/js/fonts und gibt sie in den öffentlichen Ordner in ihren jeweiligen Unterordnern (css/js/fonts).

Hier ist ein Beispiel:

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')); 
}); 

Answer 2

ich versuchte, die aufgelistete gulpfile und lief in ein paar Fehler zu laufen. Erstens ist gulpFilter.restore keine Funktion und zweitens, wenn Sie die gefilterten Dateien wiederherstellen wollen, müssen Sie {restore: true} übergeben, wenn Sie Ihre Filter definieren. Wie so:

// gulpfile.js 

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

var gulp = require('gulp'); 

// define plug-ins 
var flatten = require('gulp-flatten'), 
    gulpFilter = require('gulp-filter'), 
    uglify = require('gulp-uglify'), 
    minifycss = require('gulp-minify-css'), 
    rename = require('gulp-rename'), 
    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', {restore: true}), 
     cssFilter = gulpFilter('*.css', {restore: true}), 
     fontFilter = gulpFilter(['*.eot', '*.woff', '*.svg', '*.ttf'], {restore: true}); 

    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')); 
}); 

Nachdem die Änderungen erwähnt lief es perfekt. :)