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

但是，我无法使主要文件夹文件来抓取我的缩小的依赖项（在此示例中，包含＆＃39; /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任务，请参阅this gist。

Answer 2

您需要指定要覆盖的包的名称，BOWER-PACKAGE此处是要替换的文本。你不想覆盖所有的依赖关系，这就是为什么它会被依赖所覆盖。

所以将 bower.json 更改为：

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

如何使用gulp和＆＃39; main-bower-files＆＃39 ;?选择缩小的依赖关系？

2 个答案: