Menu icon Foundation
htmlmin: A word of caution

If you are using htmlmin to minify HTML for the production run, here is a word of caution: It is a great tool and can speed up big pages loading times, but you should know what you do and which options to set! (This is maybe the reason why Zurb haven’t included it in Foundation?)

I just totally messed up a contact form: Some of the fields weren’t the correct width anymore and shown in a different font with much smaller input fields!

So when using Abide and/or Javascript for forms (and other elements that might mess with an element’s attributes), do not set htmlmin’s options

      removeEmptyAttributes: true,
      removeRedundantAttributes: true

but instead use a safer configuration like this (excerpt from my gulpfile.babel.js):

// Copy page templates into finished HTML files
function pages() {
  return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
    .pipe(panini({
      root: 'src/pages/',
      layouts: 'src/layouts/',
      partials: 'src/partials/',
      data: 'src/data/',
      helpers: 'src/helpers/'
    }))
    // minify HTML (must be installed before: npm install --save-dev gulp-htmlmin)
    .pipe($.if(PRODUCTION, $.htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true,
      processScripts: ["application/ld+json"],
      removeComments: true,
      removeEmptyAttributes: false,
      removeRedundantAttributes: false
      })
      .on('error', e => { console.log(e); })
    ))
    .pipe(gulp.dest(PATHS.dist));
}

This setup won’t remove empty and/or (seemingly!) redundant attributes—and you’re up and running again. :-)

Hope this helps one or the other of you fellows!

 

foundation 6abidehtmlminattributesgulpfile

If you are using htmlmin to minify HTML for the production run, here is a word of caution: It is a great tool and can speed up big pages loading times, but you should know what you do and which options to set! (This is maybe the reason why Zurb haven’t included it in Foundation?)

I just totally messed up a contact form: Some of the fields weren’t the correct width anymore and shown in a different font with much smaller input fields!

So when using Abide and/or Javascript for forms (and other elements that might mess with an element’s attributes), do not set htmlmin’s options

      removeEmptyAttributes: true,
      removeRedundantAttributes: true

but instead use a safer configuration like this (excerpt from my gulpfile.babel.js):

// Copy page templates into finished HTML files
function pages() {
  return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
    .pipe(panini({
      root: 'src/pages/',
      layouts: 'src/layouts/',
      partials: 'src/partials/',
      data: 'src/data/',
      helpers: 'src/helpers/'
    }))
    // minify HTML (must be installed before: npm install --save-dev gulp-htmlmin)
    .pipe($.if(PRODUCTION, $.htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true,
      processScripts: ["application/ld+json"],
      removeComments: true,
      removeEmptyAttributes: false,
      removeRedundantAttributes: false
      })
      .on('error', e => { console.log(e); })
    ))
    .pipe(gulp.dest(PATHS.dist));
}

This setup won’t remove empty and/or (seemingly!) redundant attributes—and you’re up and running again. :-)

Hope this helps one or the other of you fellows!