O xeito máis doado de minimizar o teu CSS de Shopify que está construído usando variables líquidas

Minify Script para Shopify Liquid CSS Files

Construímos un ShopifyPlus sitio para un cliente que ten unha serie de opcións para os seus estilos no ficheiro do tema real. Aínda que iso é realmente vantaxoso para axustar estilos facilmente, significa que non tes follas de estilo en cascada estáticas (CSS) que pode facilmente mini (reducir o tamaño). Ás veces chámase CSS compresión compresión o teu CSS.

Que é a minificación CSS?

Cando escribes nunha folla de estilo, defines o estilo dun elemento HTML concreto unha vez e úsao unha e outra vez en calquera número de páxinas web. Por exemplo, se quería configurar algúns detalles específicos sobre o aspecto das miñas fontes no meu sitio, podería organizar o meu CSS do seguinte xeito:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Dentro desa folla de estilo, cada espazo, retorno de liña e tabulación ocupan espazo. Se elimino todos, podo reducir o tamaño desa folla de estilo en máis dun 40% se o CSS está reducido. O resultado é este...

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

Minificación CSS é imprescindible se queres acelerar o teu sitio e hai unha serie de ferramentas en liña que poden axudarche a comprimir o teu ficheiro CSS de forma eficiente. Só busca ferramenta de compresión CSS or minify ferramenta CSS en liña.

Imaxina un ficheiro CSS grande e canto espazo se pode aforrar reducindo o seu CSS... normalmente é un mínimo do 20 % e pode ser máis do 40 % do seu orzamento. Ter unha páxina CSS máis pequena referida ao teu sitio pode aforrar tempos de carga en cada páxina, pode aumentar a clasificación do teu sitio, mellorar a túa participación e, en última instancia, mellorar as túas métricas de conversión.

A desvantaxe, por suposto, é que hai unha soa liña nun ficheiro CSS comprimido polo que son incriblemente difíciles de solucionar ou actualizar.

Shopify CSS Liquid

Dentro dun tema de Shopify, podes aplicar configuracións que podes actualizar facilmente. Gústanos facelo mentres probamos e optimizamos os sitios para que poidamos personalizar o tema visualmente en lugar de investigar no código. Así, a nosa folla de estilo está construída con Liquid (a linguaxe de script de Shopify) e engadimos variables para actualizar a folla de estilo. Pode parecer así:

{%- 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 }}
}

Aínda que isto funciona ben, non pode simplemente copiar o código e utilizar unha ferramenta en liña para minificalo porque o seu script non comprende as etiquetas líquidas. De feito, destruirás totalmente o teu CSS se o intentas. A gran noticia é que, debido a que está construído con Liquid... podes UTILIZAR scripts para minimizar a saída!

Minificación de CSS de Shopify en líquido

Shopify permítelle escribir variables facilmente e modificar a saída. Neste caso, podemos envolver o noso CSS nunha variable de contido e despois manipulalo para eliminar todas as pestanas, retornos de liña e espazos. Atopei este código no Comunidade Shopify de Tim (tairli) e funcionou xenial!

{%- 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  }}

Entón, para o meu exemplo anterior, a miña páxina theme.css.liquid sería así:

{%- 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  }}

Cando executo o código, o CSS de saída é o seguinte, perfectamente minificado:

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