Gulp 捆绑包缩小破坏了 Bootstrap Glyphicon CSS 内容答案

【问题标题】：Gulp bundle minification breaks Bootstrap Glyphicon CSS contentGulp 捆绑包缩小破坏了 Bootstrap Glyphicon CSS 内容
【发布时间】：2017-09-23 20:23:05
【问题描述】：

我正在使用 Gulp 将我的所有依赖项 CSS 文件（包括 Bootstrap）捆绑到文件中。

但是，当我缩小捆绑文件时，我会丢失引导 unicode。

所以对于非缩小包我可以看到字形样式：

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

但在缩小的捆绑包中，字形图标样式变为：

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

我的 gulp 代码如下：

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

知道为什么会这样吗？

【问题讨论】：

标签： css twitter-bootstrap-3 gulp bundling-and-minification glyphicons

【解决方案1】：

好的，我找到了问题的根源，根本与 gulp 无关。更详细地说，我的 Web 开发设置是 VS2015，其中有一个扩展名，可以帮助捆绑和缩小文件，而这个扩展名是导致 glyphicon 损坏的原因。

解决此问题的一种方法是配置 bundleconfig.json 以创建一个单独的缩小文件，如下所示：

  {
    "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
    }
  },

因此，回顾一下 - 如果您决定捆绑所有第三方 css 库，VS2015 将破坏 glyphicon！

【讨论】：