0

I have html file width css file included in head section that has been minified with cssmin, additionally the html has been minified with htmlmin grunt task succesfully, but there is a little problem with html minified, the css and javascript included directly on the head secction is not minified by htmlmin, obiously this task if for html, not for css or javascript.

How I can minify css and javascript included in head section?

for example: this is my Dummy initial html file:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Some title</title>
    <link href="mycss.min.css" type="text/css" rel="stylesheet">
    <style>
        .class1 {
            color: black;
            /* some other properties */
        }

        .class2 {
            color: white;
            /* some other properties */
        }

        /* more and more classes */
    </style>
</head>
<body>
    Some html code
</body>
</html>

When I run htmlmin grunt task the result are this:

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title>Some title</title><link href="mycss.min.css" type="text/css" rel="stylesheet"><style>
        .class1 {
            color: black;
            /* some other properties */
        }

        .class2 {
            color: white;
            /* some other properties */
        }

        /* more and more classes */
</style></head><body>Some html code</body></html>

Notice that all is minified except the css and some javascript code that I has omitted in this example in the head section

xzegga
  • 3,051
  • 3
  • 25
  • 45
  • You could write your own task and use `cheerio` to search for `style` and `script` and minify their content. But you shouldn't use inline styles and js anyway. – t.niese Jul 15 '16 at 17:41
  • Thanks @t.niese I am using css and javascript in head section (not inline) to eliminate render-blocking JavaScript and CSS in above-the-fold content, additionally I'm not using jquery :( – xzegga Jul 15 '16 at 17:43
  • Inline style was the wrong term, but you should always separate html, css, and js in different files. If you really want to use in-page style tags then still place it a different files, minify them and include them it to the page in the composing step of our html. cheerio is not jquery is as server side tool that has a jquery like api that allows to travers and modify the html code and can be used in tools like grunt. – t.niese Jul 15 '16 at 17:49

0 Answers0