Gulp bundle minification breaks Bootstrap Glyphicon CSS content

Question

I'm using Gulp to bundle all my dependencies CSS files, including Bootstrap into on file.

However when I minify the bundled file I loose the bootstrap unicode.

So for a non-minify bundle I can see the glyphicon styling:

.glyphicon-star:before {
  content: "\e006";
}

But in the minified bundle the glyphicon styling becomes this:

.glyphicon-star:before{content:""}

My gulp code is the following:

var gulp = require("gulp"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin");

...

gulp.task("min:css", function () {
    var tasks = getBundles(regex.css).map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(cssmin())
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

Any idea why this happens?

Answer 1

Okay, I found the root of the issue and it's not to do with gulp at all. To elaborate more, my setup for web development is VS2015 and in it they have an extension that will help bundle and minify the files and that extension is what causes the glyphicon to break.

One way to get around this issue is to configure the bundleconfig.json to create a separate minify file like this:

  {
    "outputFileName": "core/lib/dependencies.css",
    "inputFiles": [
      "core/lib/bootstrap/css/bootstrap.css"...
    ],
    "minify": {
      "enabled": false
    }
  },
  {
    "outputFileName": "core/lib/dependencies.min.css",
    "inputFiles": [
      "core/lib/bootstrap/css/bootstrap.min.css"...
    ],
    "minify": {
      "enabled": false
    }
  },

So just to recap - VS2015 will break glyphicon should you decide to bundle all your thirdparty css libraries!