Làm cách nào để chọn các phụ thuộc được rút gọn với gulp và 'tệp bower-main'?

Question

Tôi đang cố tạo một nhiệm vụ gulp đơn giản lấy tất cả các phụ thuộc bower.json và đưa chúng vào tệp index.html của tôi.

Đây là cách gulpfile.js của tôi trông giống như:

var gulp = require('gulp'); 
var bowerFiles = require('main-bower-files'); 
var inject = require('gulp-inject'); 

gulp.task('default', function() { 
    gulp.src('./public/index.html') 
     .pipe(inject(gulp.src(bowerFiles({ 
      paths: { 
       bowerDirectory: './public/bower_components', 
       bowerJson: './public/bower.json' 
      } 
     }), {read: false}), {name: 'bower'})) 
     .pipe(gulp.dest('./build')); 
}); 

Và nó hoạt động. Đây là cách index.html của tôi trông giống như dưới thư mục ./build:

<!-- bower:js --> 
    <script src="/public/bower_components/zepto/zepto.js"></script> 
<!-- endinject --> 

Tuy nhiên, tôi không thể thực hiện chính-Chòi-file để lấy phụ thuộc minified của tôi (trong ví dụ này, bao gồm '/ công /bower_components/zepto/zepto.min.js ').

Tôi đã thử ghi đè này lựa chọn:

{ 
    "overrides": { 
     "BOWER-PACKAGE": { 
      "main": "**/*.min.js" 
     } 
    } 
} 

và điều này:

{ 
    "overrides": { 
     "BOWER-PACKAGE": { 
      "main": { 
       "development": "*.js", 
       "production": "*.min.js", 
      } 
     } 
    } 
} 

và nó đã không làm việc :(

Tôi đang làm gì sai

Cảm ơn trước !!

Answer 1

Bạn cần chỉ định tên của gói bạn muốn ghi đè, BOWER-PACKAGE có tại đây văn bản để thay thế. Bạn không muốn ghi đè tất cả các phụ thuộc của bạn và đó là lý do tại sao nó là một ghi đè bởi sự phụ thuộc.

Vì vậy, thay đổi bạn bower.json như:

{ 
    "overrides": { 
    "zepto": { 
     "main": "zepto.min.js" 
    } 
    } 
} 

Answer 2

Có hai giải pháp.
Trước tiên, bạn có thể sử dụng bower-main để phân biệt được rút gọn khỏi các tệp không được rút gọn.

Một tùy chọn khác là trực tiếp làm việc trên danh sách được trả về bởi các tệp tin chính-bower và kiểm tra sự tồn tại của các tệp được rút gọn. Đoạn mã này thay thế đường dẫn tệp theo tương đương được rút gọn khi chúng tồn tại.

var mainBowerFiles = require('main-bower-files'); 
var exists = require('path-exists').sync; 

var bowerWithMin = mainBowerFiles().map(function(path, index, arr) { 
    var newPath = path.replace(/.([^.]+)$/g, '.min.$1'); 
    return exists(newPath) ? newPath : path; 
}); 

Xem this gist cho công việc đầy đủ của Gulp.