如何使用 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 返回的列表并检查缩小文件的存在。当文件路径存在时，此 sn-p 将文件路径替换为它们的缩小等效项。

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

查看this gist 了解完整的 Gulp 任务。

Answer 2

您需要指定要覆盖的包的名称，BOWER-PACKAGE 是这里要替换的文本。您不想覆盖所有依赖项，这就是为什么它是依赖项覆盖的原因。

所以把你的 bower.json 改成：

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