ʻO ke ala maʻalahi loa e hōʻemi i kāu Shopify CSS i kūkulu ʻia me ka hoʻohana ʻana i nā ʻano wai wai

Minify Script no Shopify Liquid CSS Files

Ua kūkulu mākou i kahi Hōʻike i ka Shopify paena no ka mea kūʻai aku he nui nā hoʻonohonoho no kā lākou mau ʻano i ka faila kumuhana maoli. ʻOiai he mea maikaʻi loa ia no ka hoʻoponopono maʻalahi ʻana i nā kaila, ʻo ia hoʻi ʻaʻole ʻoe i loaʻa kahi ʻano paʻi paʻa paʻa (CSS) faila hiki iā ʻoe ke maʻalahi hui liʻiliʻi (hoemi i ka nui). I kekahi manawa ua kapa ʻia kēia he CSS Pilikia a kaomi ʻana kou CSS.

He aha ka CSS Minification?

Ke kākau nei ʻoe i kahi stylesheet, wehewehe ʻoe i ke ʻano no kekahi mea HTML i hoʻokahi manawa, a laila hoʻohana pinepine ʻia ma nā ʻaoʻao pūnaewele. No ka laʻana, inā makemake wau e hoʻonohonoho i kekahi mau kikoʻī no ke ʻano o kaʻu mau font ma kaʻu pūnaewele, hiki iaʻu ke hoʻonohonoho i kaʻu CSS penei:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

I loko o kēlā pepa style, e hoʻonui i kēlā me kēia hakahaka, laina hoʻi, a me ka pā. Inā wehe au i kēlā mau mea a pau, hiki iaʻu ke hoʻemi i ka nui o kēlā stylesheet ma mua o 40% inā hoʻemi ʻia ka CSS! ʻO ka hopena kēia…

h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

Hoʻoemi CSS he mea pono inā makemake ʻoe e wikiwiki i kāu pūnaewele a aia kekahi mau mea hana ma ka pūnaewele e hiki ke kōkua iā ʻoe e hoʻopaʻa pono i kāu faila CSS. Huli wale no mea paahana CSS or minify CSS mea hana Online.

E noʻonoʻo ʻoe i kahi faila CSS nui a me ka nui o ka lumi e hiki ke mālama ʻia ma ka hoʻohaʻahaʻa ʻana i kāna CSS… ʻo ia ka liʻiliʻi o 20% a hiki ke piʻi i luna o 40% o kā lākou kālā. ʻO ka loaʻa ʻana o kahi ʻaoʻao CSS liʻiliʻi i kuhikuhi ʻia ma kāu pūnaewele hiki ke mālama i nā manawa hoʻouka ma kēlā me kēia ʻaoʻao, hiki ke hoʻonui i ka pae o kāu pūnaewele, hoʻomaikaʻi i kāu hoʻopili ʻana, a hoʻomaikaʻi hope i kāu metric hoʻololi.

ʻO ka ʻaoʻao lalo, ʻoiaʻiʻo, aia kahi laina hoʻokahi i kahi faila CSS i hoʻopaʻa ʻia no laila paʻakikī loa lākou e hoʻoponopono a hoʻoponopono paha.

Shopify CSS Liquid

I loko o kahi kumumanaʻo Shopify, hiki iā ʻoe ke hoʻopili i nā hoʻonohonoho hiki iā ʻoe ke hoʻololi maʻalahi. Makemake mākou e hana i kēia ʻoiai mākou e hoʻāʻo a hoʻopaʻa i nā pūnaewele i hiki iā mākou ke hoʻonohonoho pono i ke kumumanaʻo ma mua o ka ʻeli ʻana i ke code. No laila, kūkulu ʻia kā mākou Stylesheet me Liquid (Shopify's scripting language) a hoʻohui mākou i nā mea hoʻololi e hoʻohou i ka Stylesheet. E like paha me kēia:

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

ʻOiai e hana maikaʻi ana kēia, ʻaʻole hiki iā ʻoe ke kope wale i ke code a hoʻohana i kahi hāmeʻa pūnaewele e hōʻemi ai no ka mea ʻaʻole maopopo i kā lākou palapala i nā hōʻailona wai. ʻOiaʻiʻo, e hoʻopau loa ʻoe i kāu CSS inā hoʻāʻo ʻoe! ʻO ka nūhou maikaʻi ʻo ia no ka mea ua kūkulu ʻia me Liquid… hiki iā ʻoe ke hoʻohana maoli i ka scripting e hōʻemi i ka hopena!

Shopify CSS Minification ma ka wai

Hiki iā Shopify iā ʻoe ke maʻalahi i nā mea hoʻololi a hoʻololi i ka hopena. I kēia hihia, hiki iā mākou ke hoʻopili maoli i kā mākou CSS i loko o kahi ʻano maʻiʻo a laila hoʻololi iā ia e wehe i nā ʻaoʻao āpau, nā laina hoʻihoʻi, a me nā hakahaka! Ua loaʻa iaʻu kēia code ma ka Kaiāulu Shopify mai Tim (tailli) a ua hana maikaʻi loa!

{%- capture content %}

ALL Your CSS CODE HERE

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minifed: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

No laila, no kaʻu hiʻohiʻona ma luna, e like me kēia kaʻu ʻaoʻao theme.css.liquid:

{%- capture content %}

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minified: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

Ke holo nei au i ke code, penei ka hoʻopuka ʻana o ka CSS, hoʻemi maikaʻi ʻia:

/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}