Browserify + vue + HTML minify

Question

我正在将elixir与browserify一起使用。在我的Vue组件中，我包括html文件中的模板，如下所示：

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

它按预期工作。但是，如果我运行gulp --production，则html不会在生成的文件中压缩。

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

有一个名为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上创建问题。必须在vue.config.js中包含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('')]],
    collapseWhitespace: true,
    removeComments: true
  }
}

请参阅我的pull request