Browserify + vue + HTML 缩小

Question

我正在使用 elixir 和 browserify。在我的 vue 组件中，我包含来自 html 个文件的模板，如下所示：

Vue.extend({
    template: require('./call.html'),
    props: {
        call: {
            type: Object,
            required: true
        }
    },
    //...

它按预期工作。但是，如果我运行 gulp --production，生成的文件中html没有被压缩。

我想要实现的是从包含的 html 文件中删除所有不需要的制表符、space、换行符和注释。

有一个名为 gulp-minify-html 的软件包，但我不知道如何使用它来解决这个问题。

这里有人做过类似的事情吗？

Answer 1

看看vueify。当使用 NODE_ENV=production.

编译时，缩小会自动应用于模板

在这种情况下，您也不需要将 html 放在单独的文件中。但如果需要，您可以：只需省略 <template> 块并像往常一样将模板添加到 module.exports 对象：

<script>
    module.exports = {
        template: require('./template1.html'),
    };
</script>

研究

所以，实际上它的缩小纯粹是装饰性的。从依赖列表可以看出，vueify依赖html-minifier.

我们来看代码：

// production minifiers
if (process.env.NODE_ENV === 'production') {
  var htmlMinifier = require('html-minifier')
  // required for Vue 1.0 shorthand syntax
  var htmlMinifyOptions = {
    customAttrSurround: [[/@/, new RegExp('')], [/:/, new RegExp('')]]
  }
}

此处唯一的选项是 customAttrSurround，因此，其他任何内容都将从 default 值中获取。

结果

这里有几个选项：

修正一次来源。只需添加您的配置 here.
在 github 上创建问题。 Minifier 配置肯定必须包含在 vue.config.js.
拉取请求。

提问者的最终解决方案

上面的代码应替换为：

// production minifiers
if (process.env.NODE_ENV === 'production') {
  var htmlMinifier = require('html-minifier')
  // required for Vue 1.0 shorthand syntax
  var htmlMinifyOptions = {
    customAttrSurround: [[/@/, new RegExp('')], [/:/, new RegExp('')]],
    collapseWhitespace: true,
    removeComments: true
  }
}

看我的pull request

Browserify + vue + HTML 缩小

Browserify + vue + HTML minify

gulp

vue.js

laravel-elixir

gulp-minify

研究

结果

提问者的最终解决方案