Bower'ı Gulp.js ile nasıl bütünleştirebilirim?

Question

bir kaç şey

1. Bower bağımlılıkları

Ben umuyordum sırasına göre bir dosyaya bu bağımlılıkları Concat

bağımlılıkları yükleme yapan bir yudum görevi yazmaya çalışıyorum Bu bağımlılıkların yollarını belirtmek zorunda kalmadan bunu yapın. bower list --paths komutunun olduğunu biliyorum ama birlikte bağlanması mümkün değilse emin değilim.

Herhangi bir düşünce?

Düzenleme yüzden gulp-bower-files kullanmaya çalışıyorum ve bir eaccess hatası alıyorum ve onun birleştirilmiş dosya oluşturmayan.

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

ve bu hatanın

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

Answer 1

Kullanım main-bower-files

genelinde gelmeye devam

Projenizin bower.json'unda tanımlanan Bower paketlerinizin tüm üretim (ana) dosyalarını alır ve bunları göreviniz için gulp src olarak kullanır.

senin gulpfile içinde entegre:

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

tüm üretim dosyalarını kapmak Bu görevi yaptı, css/js/yazı filtreler ve kendi alt klasörler (css/js/yazı kamu klasöre çıkarır). Ben listelenen gulpfile çalıştırma girişimi ve bir çift hatalar karşılaşmıştı

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

:

İşte bir örnek. İlk gulpFilter.restore bir işlev değildir ve ikincisi filtrelenmiş dosyaları geri yüklemeyi planlıyorsanız, filtrelerinizi tanımlarken {restore: true} değerini geçmeniz gerekir. böylece gibi: değişiklikler söz sonra

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

mükemmel koştu. :)