Làm cách nào để tích hợp Bower với Gulp.js?

Question

Tôi cố gắng để viết một nhiệm vụ ngụm mà không một vài điều

1. Cài đặt Bower cách phụ thuộc
2. concat những người phụ thuộc vào một tập tin theo thứ tự của các phụ thuộc

Tôi đã hy vọng làm điều này mà không cần phải xác định đường dẫn đến những phụ thuộc đó. Tôi biết có lệnh bower list --paths nhưng tôi không chắc liệu có thể kết hợp nó với nhau hay không.

Mọi suy nghĩ?

Sửa

Vì vậy, tôi đang cố gắng sử dụng gulp-bower-files và tôi nhận được một lỗi eAccess và nó không tạo ra các tập tin nối vào nhau.

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

và tôi tiếp tục đi ngang qua lỗi này

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

Answer 1

Sử dụng main-bower-files

Nó lấy tất cả các tệp sản xuất (chính) của gói Bower của bạn được xác định trong bower.json của dự án và sử dụng chúng làm src gulp cho nhiệm vụ của bạn.

tích hợp nó trong gulpfile của bạn:

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

tôi đã thực hiện nhiệm vụ này mà lấy tất cả các file sản xuất, lọc css/js/fonts và xuất chúng trong thư mục nào trong thư mục con tương ứng của họ (css/js/fonts).

Dưới đây là một ví dụ:

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

Tôi đã cố gắng để chạy gulpfile niêm yết và chạy vào một vài sai sót. Đầu tiên gulpFilter.restore không phải là một hàm, và thứ hai nếu bạn có kế hoạch khôi phục các tệp đã lọc, bạn cần phải vượt qua {restore: true} khi bạn xác định các bộ lọc của mình. Giống như vậy:

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

Sau khi những thay đổi được đề cập nó chạy hoàn hảo. :)