1

我正在elixir与browserify. 在我的 vue 组件中，我包含来自 html 文件的模板，如下所示：

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

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

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

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

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

4

1 回答 1

2

看看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，因此，其他任何内容都将从默认值中获取。

结果

我们在这里有几个选择：

  1. 修复一次源。只需在此处添加您的配置。
  2. 在 github 上创建一个问题。缩小器配置肯定必须包含在 vue.config.js 中。
  3. 拉取请求。

提问者的最终解决方案

上面的代码应该替换为：

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

查看我的拉取请求

于 2015-12-16T14:16:38.330 回答