Browserify + vue + HTML 縮小

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 ，因此，其他任何內容都將從默認值中獲取。

結果

我們在這里有幾個選擇：

1. 修復一次源。 只需在此處添加您的配置。
2. 在github上創建一個問題。 Minifier 配置肯定必須包含在 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
  }
}

查看我的拉取請求