penibelst/jekyll-compress-html

Two ways compress.html can break JavaScript

narthur opened this issue · 5 comments

Hey, just ran into this, and wondered if either of these things can be fixed in compress.html.

Had this script in my head.html:

<script>
    // terrificjs bootstrap
    (function($) {
        $(document).ready(function() {
            var $page = $('body');
            var config = {
              dependencyPath: {
                plugin: 'javascripts/'
              }
            }
            var application = new Tc.Application($page, config);
            application.registerModules();
            application.start();
        });
    })(Tc.$);
  </script>

compress.html outputs this like so:

<script> // terrificjs bootstrap (function($) { $(document).ready(function() { var $page = $('body'); var config = { dependencyPath: { plugin: 'javascripts/' } } var application = new Tc.Application($page, config); application.registerModules(); application.start(); }); })(Tc.$); </script> 

There's two problems with this:

  1. The comment was left in, so the entire script becomes commented out.
  2. The missing semicolon after the var config declaration remains omitted, causing the browser to choke.

These problems are easily enough fixed in the source once diagnosed (remove the comment and add the semicolon), but is there any way one or both of these problems can be fixed in compress.html?

Not unless you want to stop it compressing. Dirty hacks include blanklines mode, in-script pre tags:

<script>
// <pre>
your;
js;
code;
// </pre>
</script>

The clean way to fix it would be to either move the js to it's own file or change it so it works on one line.

Thanks, @jnvsor. I opted for editing the script so that it would work on one line. Just thought it might be something that could be prevented in the future by an update to the compression layout.

Keep up the great work! :)

+1 for the improvement that doesn't compress what we have inside <script> tag.

I'm inspired from @jnvsor

--- 
layout: compress
--- 

{{ content | replace: "<script>", "<script>// <pre>" | replace: "</script>", "// </pre></script>" }}

This script, I place on _layouts/minify.html

@mzaini30 Sadly we can't do this generically because the <script> might be inside a <pre>, and nested <pre> will screw up the compress output