How to select minified dependencies with gulp and 'main-bower-files'?

Question

I'm trying to create a simple gulp task that fetches all bower.json dependencies and inject them to my index.html file.

This is how my gulpfile.js looks like:

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

And it works. This is how my index.html looks like under ./build directory:

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

However, I'm unable to make main-bower-files to grab my minified dependencies (in this example, to include '/public/bower_components/zepto/zepto.min.js').

I have tried this override options:

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

and this:

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

and it didn't work :(

What am I doing wrong?

Thanks in advance!!

Answer 1

There are two solutions.
First, you can use bower-main to distinguish minified from non-minified files.

Another option is to directly work on the list returned by main-bower-files and check the existence of minified files. This snippet replaces file paths by their minified equivalent when they exist.

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

See this gist for a full Gulp task.

Answer 2

You need to specify the name of the package you want to override, BOWER-PACKAGE is here the text to replace. You don't want to override all of your dependencies and that's why it's one override by dependency.

So change your bower.json as:

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