Gulp 包缩小中断 Bootstrap Glyphicon CSS 内容

Question

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

然而，当我缩小捆绑文件时，我丢失了 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);
});

知道为什么会这样吗？

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

Gulp 包缩小中断 Bootstrap Glyphicon CSS 内容

Gulp bundle minification breaks Bootstrap Glyphicon CSS content

css

bundling-and-minification

glyphicons

twitter-bootstrap-3

gulp