Minification of CSS and JS

[Adrian Moore]

Right now I have my CSS and JavaScript split out into multiple files depending on what part of the page they are rendering.

Unfortunately this approach has me download many files when the page is hit.

Is there any mechanism in Hippo to minify/combine javascript and css files?  Or should I combine them manually?

[Joeri de Gooijer]

Hi Adrian,

I dont believe we have any special jsp/freemarker tags that do the minification for you. You could merge them manually, or you could use front-end tooling like GruntJS or GulpJS to name a few. With those tools you can create a build system for your site assets. I also believe Maven has a yui-compressor for css and js available that you could use if you're not familiar with nodejs and previously mentioned tools.

Regards,

Joeri

--
Hippo Community Group: The place for all discussions and announcements about Hippo CMS (and HST, repository etc. etc.)
 
To post to this group, send email to hippo-c...@googlegroups.com
RSS: https://groups.google.com/group/hippo-community/feed/rss_v2_0_msgs.xml?num=50
---
You received this message because you are subscribed to the Google Groups "Hippo Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to hippo-communi...@googlegroups.com.
Visit this group at http://groups.google.com/group/hippo-community.
For more options, visit https://groups.google.com/d/optout.

[Jeroen Reijn]

At one of our customers we used this maven plugin to do exactly that.

https://github.com/samaxes/minify-maven-plugin

On Thu, Jan 29, 2015 at 5:56 PM, Adrian Moore <stew...@gmail.com> wrote:

--
Hippo Community Group: The place for all discussions and announcements about Hippo CMS (and HST, repository etc. etc.)
 
To post to this group, send email to hippo-c...@googlegroups.com
RSS: https://groups.google.com/group/hippo-community/feed/rss_v2_0_msgs.xml?num=50
---
You received this message because you are subscribed to the Google Groups "Hippo Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to hippo-communi...@googlegroups.com.
Visit this group at http://groups.google.com/group/hippo-community.
For more options, visit https://groups.google.com/d/optout.

--

Jeroen Reijn
Hippo

Amsterdam office - Oosteinde 11, 1017 WT Amsterdam

Boston office - 745 Atlantic Ave, Eight Floor, Boston MA 02111, United states of America.

US +1 877 414 4776 (toll free)
Europe +31(0)20 522 4466
www.onehippo.com

http://blog.jeroenreijn.com | @jreijn | http://about.me/jeroenreijn

[Adrian Moore]

I am trying j.reijn's solution for this.

I have added it to my pom and I think its working, as I see this is my log:

[INFO] Starting CSS task:

[INFO] Processing source file [reset.css].

[INFO] Processing source file [nav.css].

[INFO] Creating the merged file [style.css].

[INFO] Creating the minified file [style.min.css].

[INFO] Uncompressed size: 9210 bytes.

[INFO] Compressed size: 7079 bytes minified (2095 bytes gzipped).

But I am unable to find where I can access the compiled file when the application is running in cargo.

I have tried:

http://localhost:8080/site/css/style.css

http://localhost:8080/site/css/style.min.css

http://localhost:8080/site/style.css

It feels like I am probably missing something really obvious here.

Here is the relevant section of my pom.xml.  I have only added a few files for test.

<plugin>
    <groupId>com.samaxes.maven</groupId>
    <artifactId>minify-maven-plugin</artifactId>
    <version>1.7.4</version>
    <executions>
        <execution>
            <id>default-minify</id>
            <phase>package</phase><!-- When omitted defaults to 'process-resources' -->
            <configuration>
                <charset>UTF-8</charset>
                <cssSourceDir>css</cssSourceDir>
                <cssSourceFiles>
                    <cssSourceFile>reset.css</cssSourceFile>
                    <cssSourceFile>nav.css</cssSourceFile>
                </cssSourceFiles>
                <cssFinalFile>style.css</cssFinalFile>
                <jsSourceDir>js</jsSourceDir>
                <jsSourceFiles>
                    <jsSourceFile>web.js</jsSourceFile>
                    <jsSourceFile>web.views.js</jsSourceFile>
                </jsSourceFiles>
                <jsFinalFile>script.js</jsFinalFile>
                <jsEngine>CLOSURE</jsEngine>
            </configuration>
            <goals>
                <goal>minify</goal>
            </goals>
        </execution>
    </executions>
</plugin>

[Jeroen Reijn]

Hi Adrian,

yeah with the default configuration it does not seem to be packaged within the war file. Try removing the

<phase>package</phase>

from the plugin configuration. It should default back to the package resources phase, which makes sure it gets put into the package. Once you re package the project and start cargo you should be able to reach it under

http://localhost:8080/site/css/style.css and http://localhost:8080/site/css/style.min.css for the minified version.

Cheers,

Jeroen

--
Hippo Community Group: The place for all discussions and announcements about Hippo CMS (and HST, repository etc. etc.)
 
To post to this group, send email to hippo-c...@googlegroups.com
RSS: https://groups.google.com/group/hippo-community/feed/rss_v2_0_msgs.xml?num=50
---
You received this message because you are subscribed to the Google Groups "Hippo Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to hippo-communi...@googlegroups.com.
Visit this group at http://groups.google.com/group/hippo-community.
For more options, visit https://groups.google.com/d/optout.

[ADRIAN MOORE]

That worked great! Thank you so much!

> You received this message because you are subscribed to a topic in the

> Google Groups "Hippo Community" group.

> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/hippo-community/cF3HKwOEeAw/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to

[andreas.h...@commercetools.de]

Hi,

Seeing this thread, I wonder if we also can deliver the compressed  js/css files in gzip format (https://developers.google.com/speed/docs/insights/EnableCompression). Do I have to define the gzip "file delivery" in tomcat, or what is in this case the "best practice"?

best Regards

Andi

Amtsgericht München, HRB 161496
Geschäftsführer: Denis Werner, Dirk Hörig, Udo Rauch, Dr. Robert Zores

www.commercetools.com