Browserify + vue + HTML minify

Question

I'm using elixir together with browserify. In my vue components I include templates from html files, like this:

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

It works as expected. However, if I run gulp --production, the html is not compressed in the generated file.

What I'd like to achieve is to remove all unneeded tab, space, newline characters, comments from the included html files.

There's a package called gulp-minify-html but I don't know how if I could use this one for solving this issue.

Has anyone here done something similar to this?

Yauheni Prakopchyk · Accepted Answer · 2015-12-17 16:24:35Z

2

Take a look at vueify. Minification is automatically applied on template, when compiled with NODE_ENV=production.

You won't need to place your html in separate file in that case, as well. But you could if needed: just omit <template> block and add template to module.exports object as usual:

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

Research

So, in fact its minification is purely decorational. As follows from dependencies list, vueify depends on html-minifier.

Let's take a look at code:

// 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('')]]
  }
}

The only option here is customAttrSurround, thus, anything else will be taken from default values.

Result

We have several options here:

Fix the source once. Just add your config here.
Create an issue on github. Minifier config surely must be included in vue.config.js.
Pull request.

Final solution by asker

The code above should be replaced by this:

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

See my pull request

edited Dec 17, 2015 at 16:24

answered Dec 16, 2015 at 14:16

Yauheni Prakopchyk

11k5 gold badges36 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

balping Over a year ago

Thanks! Will it also work if I still want to store html in a separate file?

balping Over a year ago

HI! Thanks for your hint. I tried it out and it only removes unnecessary whitespace characters from the beginning and the end. I use a package called laravel-elixir-vueify and I compiled the example source provided here: github.com/laracasts/Laravel-Elixir-Vueify-Setup . I made a diff to demonstrate this: i.imgur.com/GsnFKkp.png . On the right NODE_ENV=production is turned on, while on the left, it's not. The --production option on gulp has no effect on this. However CSS is minified as excepted. But in HTML there are still unnecessary whitespaces

Yauheni Prakopchyk Over a year ago

@balping let's dive in then. Check my answer.

balping Over a year ago

Thanks very much for your detailed work! I'll try to correct this bug

balping Over a year ago

I made a pull request. It works for me at least. Thanks again! github.com/vuejs/vueify/pull/42

|

Collectives™ on Stack Overflow

Browserify + vue + HTML minify

1 Answer 1

Research

Result

Final solution by asker

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Research

Result

Final solution by asker

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related