Django templates error

[kmturley]

I think i've encountered an issue with gulp-minify-html/minimize and django templating language. If you output this into an html file:

{{ bg }}

Then run the gulpfile.js

var gulp = require('gulp'),
    minifyHtml = require('gulp-minify-html');
gulp.task('optimise.html', function () {
    return gulp.src('/**/*.html')
        .pipe(minifyHtml())
        .pipe('dist/')
});

It outputs correctly:

{{ bg }}

But then if you change it to this:

{% if bg %}{{ bg }}{% endif %}

It fails and outputs:

{% if bg %}{{ }}{% endif %}

Any help you can do to fix/solve would be awesome, thanks!

[Swaagie]

Where in the html do those template directives lives? E.g. inside an element as text or inside a parameter?

[kmturley]

with django you can use them wherever you want, I was using them as an attribute: {% if bg %}style="background-image: url('{{ bg }}')"{% endif %}

[Swaagie]

Hmm yeah, I suspect surrounding html/code is probably causing the change. If I run the CLI script directly with the above supplied snippet it seems to work fine ./bin/minimize "{% if bg %}style=\"background-image: url('{{ bg }}')\"{% endif %}". Note that minimize only supports parsing of HTML though, e.g. excluding template directives. You'll have to inspect what the parsed element looks like of htmlparser2 to get a solid understanding of what is going wrong.

[kmturley]

It seems to work with:

./bin/minimize "{% if bg %}style=\"background-image: url('{{ bg }}')\"{% endif %}"
// outputs
{% if bg %}style="background-image: url('{{ bg }}')"{% endif %}

but not with:

./bin/minimize "<a {% if bg %}style=\"background-image: url('{{ bg }}')\"{% endif %}> hey </a>"
// outputs
<a {% if bg %} style="background-image: url('{{ bg }}')" endif>hey</a>

[Swaagie]

Hmm yeah, little I can do about that. Htmlparser2 probably detects the {% if bg %} as part of the param, as a param can start with 'any' character. But always closes with"or space, and detects that before the closing{% endif %}`. Anyways, minimize is not designed to work with templates, it parser html. The only way to accommodate for this is by providing a custom parser which understands handlebar templates.

[kmturley]

Ya I can't see an option in htmlparser2 to support custom templating language. I guess what I would need is an option to switch htmlparser2 out for another parser such as swig: http://paularmstrong.github.io/swig/

But by then it might be better to just use another minification library altogether! It's a shame because I use minimize for the static html, would be useful to use it for the dynamic templates too!

[Swaagie]

htmlparser2 perfectly supports a custom parser and so does minimize, however it requires development. Another option would be to do minification after the template was processed, e.g. only HTML remains

[kmturley]

I think I have managed to solve it by using a different library:

var gulp = require('gulp'),
      minifyHtml = require('gulp-htmlmin');

gulp.task('optimise.html', function () {
    'use strict';
    return gulp.src('src/**/*.html')
        .pipe(minifyHtml({
            collapseWhitespace: true,
            ignoreCustomFragments: [ (/\{\%[^\%]*?\%\}/g) ]
        }))
        .pipe(gulp.dest('www'));
});