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 で問題を作成します。Miniifier 構成は必ず 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 に答える