如何用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"
    }
  }
}