Minifying a scss.liquid file

amarinediary
Tourist
15 0 1

Hey guys, Paul here, coming to you for a bit of help ! 

I'm still new in the Shopify and liquid stuff but i'm getting there.

I'm cutrently trying to minify a scss.liquid file, usually when I try to do that with a css file, I use an online minifier, exept that, apprently the scss.liquid format is not properly handled. Every time I try to minify it, my site crash ?

Do you guys have something to recommand regarding minifying a scss.liquid file ?

thanks in advance,

regards, Paul.

0 Likes
Jason
Shopify Expert
10037 119 1873

Hey Paul,

Shopify will already remove the whitespace from the scss.liquid file once it's rendered. Are you finding that it's not doing this? Post the file link (that the customer would see in the htm) if that's the case.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
amarinediary
Tourist
15 0 1

Hey Jason, it's just that when i'm running it through out gtmetrix, the Yslow shows that CSS & JS would be more optimized.

0 Likes
Joe_Morris
Shopify Partner
18 0 2

I have the same problem

Google page speed insights reports i need to minify have a look here https://cdn.shopify.com/s/files/1/0341/0109/t/57/assets/style.css?10230504916802293272

My workaround is to:

  • publish the theme,
  • Download the CSS files created from the scss.liquid
  • Minify those css files
  • Create a duplicate theme
  • Reference the css files instead of the liquid ones.
  • Publish that theme

Massive hassle to be honest.

Anyone know how i can minify the liquid files?

Regards

Joe

 

 

0 Likes
tim
Shopify Expert
2857 117 937

Joe, 

you can experiment with the following -- wrap your css and css.liquid files with this code:

{% capture content %}
   ... content of your CSS/CSS.Liquid file ...
{% endcapture %}

/* before minify: {{ content.size }} */
{% assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" %}
{% assign new_content = "" %}
{% for word in content %}
	{% assign new_word = word | split: "/*" | first | strip %}
  	{% assign new_content = new_content | append: new_word %}
{% endfor %}
/*  after minify: {{ new_content.size }} */
{{ new_content }}

This is kind of home-brew minifier which will remove comments, repeated spaces and newlines from the file.

In my limited testing Google was happy with this minification.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
Joe_Morris
Shopify Partner
18 0 2

Thanks Tim, I will give it a go

Cheers

 

joe

0 Likes
KR_9L
New Member
1 0 0

We are dealing with the same issue -- I would love to know how the "home brew minfier" worked out

0 Likes
blackivylingeri
New Member
2 0 0

Homebrew worked a treat!

0 Likes
r1nk
Tourist
16 0 1

May I know which files you are referring through?

I'm new to shopify, most works on Wordpress before.

Attached is image of all the files list under asset folder.

P/S : Im referring to the home-brew minifier method

 

0 Likes
Jason
Shopify Expert
10037 119 1873

Why do you need to use a custom minification method? The built in scss minification should work well - unless your code has errors. In which case it may be worth trying to fix the errors vs trying to force some other approach.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au