如何用gulp和'main-bower-files'選擇縮小的依賴關系？

Question

我正在嘗試創建一個簡單的gulp任務，它獲取所有bower.json依賴項並將它們注入我的index.html文件。

這就是我的gulpfile.js的樣子：

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

它有效 。 這就是我的index.html在./build目錄下的樣子：

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

但是，我無法使main-bower-files獲取我的縮小的依賴項（在此示例中，包含'/public/bower_components/zepto/zepto.min.js'）。

我試過這個覆蓋選項：

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

還有這個：

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

它不起作用:(

我究竟做錯了什么？

提前致謝！！

Answer 1

有兩種解決方案。
首先，您可以使用bower-main來區分縮小文件和非縮小文件。

另一種選擇是直接處理main-bower-files返回的列表，並檢查縮小文件的存在。 此代碼段在文件路徑存在時用縮小的等效項替換文件路徑。

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

請參閱此要點以獲取完整的Gulp任務。

Answer 2

您需要指定要覆蓋的包的名稱， BOWER-PACKAGE在這里是要替換的文本。 您不希望覆蓋所有依賴關系，這就是依賴關系覆蓋的原因。

所以將你的bower.json更改為：

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