Foundation-emails: [Question] Inliner without minification?

[cossssmin]

Is there a way to npm run build so we get inline styles, BUT not minify the HTML?

It would be great if this were an option so that, if you're coding a template that others will develop on/customize, you don't need to resort to online tools to prettify your HTML.

More, at least for me, the minified HTML is actually broken, I always need to prettify it online in order to get usable code.

Thanks!

[rafibomb]

In the GulpFile you have these options:

.pipe($.htmlmin, {
      collapseWhitespace: false,
      minifyCSS: false
    });

Once you make the changes and save - make sure to re-run npm start

We'd actually like to have this documented. Is that something you can help with?

[cossssmin]

Coolio, would love to get involved. What do I need to do? (don't know how to Git, but willing to learn if that's required)

[rafibomb]

Awesome - for docs you can jump into the page by clicking the edit button at the top of the page:

I would title a new section below the descriptions with an <h2> and maybe call it "Build Options"

Or through GitHub, clone this repo, make changes on a branch, then in github you will see a Pull Request option next to your branch name.

Dont worry if it isn't perfect, we can review it and add to it. Thanks!

[rafaelmedian]

I took it @rafibomb 👍
https://github.com/zurb/foundation-emails/pull/458

[renatodeleao]

Like @hellocosmin the html minification was also breaking my code builds. I actually only noticed it when try to inline using litmus online inliner just to double check if I wasn't crazy.

So i turned off, everything was in place except one thing: buttons styles. When I actually send the email, not the web preview, the primary button had no background (using default foundation styles here, only changed variables values). button text color is white background of the section was white so they "disappeared".

I'm not sure how can I test this, because secondary button styles were preserved.
¯\_(ツ)_/¯

Final and paradoxal solution to keep everything right: keep foundation for emails defaults, with htmlmin options true and then beautify using gulp-prettify
¯\_(ツ)_/¯ * 2

[rafibomb]

@renatodeleao How does gulp-prettify help in this case?

If you have any specific example of code that is being changed, please share it in a new issue so it can be investigated! Thanks!

Thanks to @zxhadow for the PR on this!

[michaelbrazell]

@rafibomb Oddly enough if I remove the HTML minification it seems to also skip any CSS inlining. I've kept my gulp file unchanged other than setting those two flags to false (and I also tried just removing that final .pipe() method, but they both produced the same result. The HTML is not minified, but there's also not any CSS inlining. Gulp is reporting that the inlining is happening too.

Will keep looking into it, but interest if you or anybody else has run into this?

Thanks!

Edit, 15mins later

Looks like I was having some build issues and while the emails looked to be building correctly, they weren't. I got this to work by duping my working directory, deleting node_modules from the new directory, and running:

$ npm install

then

$ foundation build

Which went through the build process and it worked, sans HTML minification/collapsing white space.

Thanks!