Gulp Browserify&x2B；vue+；HTML缩小

我正在使用

elixir

和

browserify

。在我的vue组件中，我包括来自html文件的模板，如下所示：

Vue.extend({
模板：require（'./call.html'），
道具：{
电话：{
类型：对象，
必填项：true
}
},
//...

但是，如果运行

gulp--production

，html不会在生成的文件中压缩

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

有一个名为的包，但我不知道如何使用这个包来解决这个问题

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

看看。 当使用节点_ENV=production进行编译时，缩小会自动应用于模板

在这种情况下，您也不需要将html放在单独的文件中。 但如果需要，您可以这样做：只需省略

块，然后将模板添加到模块中。像往常一样导出对象：

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

这里唯一的选项是

customAttrSurround

，因此，其他任何内容都将从值中获取

结果 我们有几种选择：

修复源代码一次。只需添加配置

在github上创建问题。vue.config.js中肯定必须包含Minifier配置

拉请求

asker的最终解决方案 上述代码应替换为以下代码：

// 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
  }
}

---

查看我的

谢谢！如果我仍然想将html存储在单独的文件中，它也会起作用吗？嗨！谢谢你的提示。我尝试过，它只从开头和结尾删除不必要的空白字符。我使用了一个名为

laravel elixir vueify

的包，我编译了这里提供的示例源代码：。我与恶魔有所不同请注意：。右侧节点上的_ENV=production已打开，而左侧则未打开。gulp上的

--production

选项对此没有影响。但是CSS被缩小为例外。但在HTML中仍然不需要whitespaces@balping那么让我们开始吧。检查我的答案。非常感谢你的详细工作！我会尽力更正ect这个错误我提出了一个拉请求。它至少对我有效。再次感谢！

// 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
  }
}