Jak piszecie obecnie css? próbowałem css-modules wbudowane w webpacka, jednak średnio mi to podeszło. Zaś react-css-modules nie potrafiłem skonfigurować do pracy z hooks.
Obecnie korzystam z SASS + BEM i dosyć dobrze mi się z tego korzysta.
0
2
Normalne CSS.
W projektach, gdzie mi zależy dodatkowo własny skrypt minifikatora i pakera, który robi ze wszystkich CSS-ów jeden plik.
Do samego pisania Notepad++ z wtyczką QuickText, która pozwala pisać abrewiacjami rozwijanymi przez Ctrl+;
typu:
bc=background-color:$;
bob=border-bottom:1px solid $;
bobc=border-bottom-color:$;
boblra=border-bottom-left-radius:$;
.b=block
.ib=inline-block
Albo przechodzić cyklicznie przez grupę wartości:
left=right
right=center
center=justify
justify=left
Ew. jeszcze podpowiadać wartości.
0
własny skrypt minifikatora i pakera
Napiszesz coś więcej w tym temacie? Bo spotkałem się z pakowaniem własnych styli/JS przy użyciu gotowych rozwiązań, ale nie kojarzę, żeby ktoś pisał własne skrypty robiące to zadanie. Rozwiń proszę wątek, bo zabrzmiało to dość ciekawie.
1
cerrato napisał(a):
własny skrypt minifikatora i pakera
Napiszesz coś więcej w tym temacie? Bo spotkałem się z pakowaniem własnych styli/JS przy użyciu gotowych rozwiązań, ale nie kojarzę, żeby ktoś pisał własne skrypty robiące to zadanie.
Bo teraz nikt nic własnego nie robi. Wszyscy tylko instalują wtyczki do bibliotek na frejmłorkach :p
Rozwiń proszę wątek, bo zabrzmiało to dość ciekawie.
Nie jest to mistrzostwo świata, ale na moje potrzeby wystarcza.
Plik konfiguracyjny (zmienne/ini_minifikator.php):
<?php
// --- czy uruchomić ---
// 0 - dezaktywuj | 1 - uruchom // wyłącznik ogólny
$st_minifikator__uruchom=1;
// 0 - dezaktywuj | 1 - sprawdź, czy są nowe | 2 - wymuś uruchomienie niezależnie od daty
$st_minifikator__uruchom_html=1;
$st_minifikator__uruchom_css=1;
$st_minifikator__uruchom_js=1;
// --- /czy uruchomić ---
// --- czy przetwarzać ---
// 0 - zachowaj oryginał | 1 - przetwarzaj
$st_minifikator__przetwarzaj_html=1;
$st_minifikator__przetwarzaj_css=1;
$st_minifikator__przetwarzaj_js=1;
// --- /czy przetwarzać ---
// --- listy plików ---
// html
$st_tab_minifikator_html[]="zmienne/_div_panele_body.php";
$st_tab_minifikator_html[]="zmienne/_div_panel_prawy.php";
// css
$st_tab_minifikator_regula_css[]="-"; $st_tab_minifikator_css[]="zmienne/_style.css";
$st_tab_minifikator_regula_css[]="@media screen and (max-width: 720px)"; $st_tab_minifikator_css[]="zmienne/_style__ekran_1_sredni.css";
$st_tab_minifikator_regula_css[]="@media screen and (max-width: 440px)"; $st_tab_minifikator_css[]="zmienne/_style__ekran_2_maly.css";
$st_tab_minifikator_regula_css[]="@media screen and (max-width: 270px)"; $st_tab_minifikator_css[]="zmienne/_style__ekran_3_mikro.css";
// js
$st_tab_minifikator_naglowek_js[]="zmienne"; $st_tab_minifikator_js[]="zmienne/_ini_konfiguracja_funkcje_responsywne.js";
$st_tab_minifikator_naglowek_js[]="funkcje"; $st_tab_minifikator_js[]="_funkcje.js";
$st_tab_minifikator_naglowek_js[]="funkcje rs"; $st_tab_minifikator_js[]="_funkcje_responsywne.js";
// --- /listy plików ---
?>
Właściwy minifikator (modul_minifikator.php)
<?php
// --- funkcje minifikacji ----------------------------------------------
// --- minifikuj HTM ---
function minifikuj_htm ($str) {
// --- wstępna obróbka
$str = "\n".$str."\n";
$str = str_replace("\r", "", $str);
// --- /wstępna obróbka
// --- /usuń komentarze
$str = preg_replace('/<!--.*?-->/s', '', $str); // <!--x-->/
// --- /usuń komentarze
// --- zaznacz TAG-i pierszego poziomu
$str = str_replace("\n<", "\n<:n:><", $str); // dodaj znacznik przed: <
$str = str_replace("\n<:n:></", "\n</", $str); // usuń znacznik przed: </
// --- /zaznacz TAG-i pierszego poziomu
// --- usuń spacje i tabulatory
$str = preg_replace('/\n[ \t\f]+/', "\n", $str); // |_
$str = preg_replace('/[ \t\f]+\n/', "\n", $str); // _|
$str = preg_replace('/>[ \t\f\n]+</s', "><", $str); // >_<
// --- /usuń spacje i tabulatory
// --- zmień przełamania wierszy
$str = preg_replace('/[\n]+/', '', $str); // usuń przełamania wiersza
$str = str_replace("<:n:>", "\n", $str); // dodaj przełamania dla TAG-ów pierwszego poziomu
$str = preg_replace("/^\n/", "", $str); // usuń pierwszą pustą linię
$str = preg_replace("/\n$/", "", $str); // usuń ostatnią pustą linię
// --- /zmień przełamania wierszy
return $str;
}
// --- /minifikuj HTM ---
// --- minifikuj CSS ---
function minifikuj_css ($str) {
// --- wstępna obróbka
$str = "\n".$str."\n";
$str = str_replace("\r", "", $str);
// --- /wstępna obróbka
// --- /usuń komentarze
$str = preg_replace('/\/\*.*?\*\//s', '', $str); // /*x*/
// --- /usuń komentarze
// --- usuń spacje i tabulatory
$str = preg_replace('/\n[ \t\f]+/', "\n", $str); // |_
$str = preg_replace('/[ \t\f]+\n/', "\n", $str); // _|
$str = preg_replace('/[ \t\f]*:[ \t\f]*/', ':', $str); // _:_
$str = preg_replace('/[ \t\f]*;[ \t\f]*/', ';', $str); // _;_
$str = preg_replace('/[ \t\f]*,[ \t\f]*/', ",", $str); // _,_
$str = preg_replace('/[ \t\f]*\>[ \t\f]*/', '>', $str); // _>_
$str = preg_replace('/[ \t\f]*\+[ \t\f]*/', '+', $str); // _+_
$str = preg_replace('/[ \t\f]*\~[ \t\f]*/', '~', $str); // _~_
$str = preg_replace('/[ \t\f]*\{[ \t\f]*/', '{', $str); // _{_
$str = preg_replace('/[ \t\f]*\}[ \t\f]*/', '}', $str); // _}_
$str = preg_replace('/[ \t\f]*\([ \t\f]*/', '(', $str); // _(_
$str = preg_replace('/[ \t\f]*\)[ \t\f]*/', ')', $str); // _)_
// --- /usuń spacje i tabulatory
/* --- przywróć spacje w calc() --- */
$str = str_replace("%-", '% - ', $str);
$str = str_replace("%+", '% + ', $str);
/* --- /przywróć spacje w calc() --- */
// --- dodaj spacje dla @supports
$str = str_replace('@supports(', '@supports (', $str);
$str = str_replace('@supports not(', '@supports not (', $str);
$str = str_replace(')and(', ') and (', $str);
$str = str_replace(')or(', ') or (', $str);
$str = str_replace('(not(', '( not (', $str);
// --- /dodaj spacje dla @supports
// --- usuń wartości zerowe
$str = str_replace(":0px;", ':0;', $str);
$str = str_replace(":0em;", ':0;', $str);
$str = str_replace(":0ex;", ':0;', $str);
$str = str_replace(":0%;", ':0;', $str);
// --- /usuń wartości zerowe
// --- usuń puste klasy
$str = preg_replace('/\n.+\{\n\}/', '', $str); // |x{|}
// --- /usuń puste klasy
// --- zmień przełamania wierszy
$str = preg_replace('/[\n]+/', '', $str); // usuń przełamania wiersza
$str = str_replace("}", "}\n", $str); // dodaj przełamania wiersza po "}"
$str = str_replace("\n}", "}", $str); // usuń przełamanie przed "\n}"
$str = preg_replace("/^\n/", "", $str); // usuń pierwszą pustą linię
$str = preg_replace("/\n$/", "", $str); // usuń ostatnią pustą linię
// --- /zmień przełamania wierszy
return $str;
}
// --- /minifikuj CSS ---
// --- minifikuj JS ---
function minifikuj_js ($str) {
// --- wstępna obróbka
$str = "\n".$str."\n";
$str = str_replace("\r", "", $str);
// --- /wstępna obróbka
// --- /usuń komentarze
// wieloliniowe
$str = preg_replace('/\/\*.*?\*\//s', '', $str); // /*x*/
// jednoliniowe
$str = preg_replace('/\/\/[^\'\"]*?\n/', "\n", $str); // //[^'"]\n
// UWAGA: nie usuwa komentarzy jednoliniowych po poleceniach z cudzysłowami, np:
// komenda; // ustaw "coś"
// --- /usuń komentarze
// --- usuń spacje i tabulatory
$str = preg_replace('/\n[ \t\f]+/', "\n", $str); // |_
$str = preg_replace('/[ \t\f]+\n/', "\n", $str); // _|
$str = preg_replace('/[ \t\f]*:[ \t\f]*/', ':', $str); // _:_
$str = preg_replace('/[ \t\f]*;[ \t\f]*/', ';', $str); // _;_
$str = preg_replace('/[ \t\f]*,[ \t\f]*/', ',', $str); // _,_
$str = preg_replace('/[ \t\f]*\=[ \t\f]*/', '=', $str); // _=_
$str = preg_replace('/[ \t\f]*\![ \t\f]*/', '!', $str); // _!_
$str = preg_replace('/[ \t\f]*\<[ \t\f]*/', '<', $str); // _<_
$str = preg_replace('/[ \t\f]*\>[ \t\f]*/', '>', $str); // _>_
$str = preg_replace('/[ \t\f]*\{[ \t\f]*/', '{', $str); // _{_
$str = preg_replace('/[ \t\f]*\}[ \t\f]*/', '}', $str); // _}_
$str = preg_replace('/[ \t\f]*\([ \t\f]*/', '(', $str); // _(_
$str = preg_replace('/[ \t\f]*\)[ \t\f]*/', ')', $str); // _)_
// --- /usuń spacje i tabulatory
// --- zmień przełamania wierszy
$str = preg_replace('/[\n]+/', '', $str); // usuń przełamania wiersza
$str = str_replace("function", "\nfunction", $str); // dodaj przełamania wiersza
$str = preg_replace("/^\n/", "", $str); // usuń pierwszą pustą linię
$str = preg_replace("/\n$/", "", $str); // usuń ostatnią pustą linię
// --- /zmień przełamania wierszy
return $str;
}
// --- /minifikuj JS ---
// --- /funkcje minifikacji ----------------------------------------------
// --- minifikuj HTML ----------------
if ($st_minifikator__uruchom_html>0) {
// --- pętla plików
$plikow_html_ile = count($st_tab_minifikator_html);
//
for ($pnr=0; $pnr<$plikow_html_ile; $pnr++) {
$temp_adres_stary=$st_tab_minifikator_html[$pnr];
// --- utwórz adres nowego pliku
$temp_adres_nowy = $temp_adres_stary;
$temp_adres_nowy = preg_replace('/^_/', "", $temp_adres_nowy);
$temp_adres_nowy = str_replace("/_", "/", $temp_adres_nowy);
// --- /utwórz adres nowego pliku
// --- jeśli plik stary ma poprawną nazwę i istnieje
if (($temp_adres_nowy != $temp_adres_stary) && is_file($temp_adres_stary)) {
// --- porównaj daty
$data_stary = filemtime($temp_adres_stary);
$data_nowy = 0;
if (is_file($temp_adres_nowy)) $data_nowy = filemtime($temp_adres_nowy);
if ($st_minifikator__uruchom_html==2) $data_nowy = 0;
// --- /porównaj daty
// --- jeśli zmodyfikowano stary lub wymuszono uruchmienie
if ($data_nowy < $data_stary ) {
$str = file_get_contents($temp_adres_stary); // czytaj
if ($st_minifikator__przetwarzaj_html == 1) $str = minifikuj_htm($str); // minifikuj
file_put_contents($temp_adres_nowy, $str); // zapisz
}
// --- /jeśli zmodyfikowano stary lub wymuszono uruchmienie
}
// --- /jeśli plik stary ma poprawną nazwę i istnieje
}
// --- /pętla plików
}
// --- /minifikuj HTML ----------------
// --- minifikuj CSS ----------------
if ($st_minifikator__uruchom_css>0) {
// --- czytaj dane pliku docelowego
$temp_adres_nowy="zmienne/style.css";
$data_nowy = 0;
if (is_file($temp_adres_nowy)) $data_nowy = filemtime($temp_adres_nowy);
if ($st_minifikator__uruchom_css==2) $data_nowy = 0;
// --- /czytaj dane pliku docelowego
// --- pętla plików - test daty
$czy_sa_nowsze_css = 0;
$plikow_css_ile = count($st_tab_minifikator_css);
//
for ($pnr=0; $pnr<$plikow_css_ile; $pnr++) {
$temp_adres_stary=$st_tab_minifikator_css[$pnr];
// --- jeśli istnieje plik stary
if (is_file($temp_adres_stary)) {
$data_stary = filemtime($temp_adres_stary);
if ($data_nowy < $data_stary ) $czy_sa_nowsze_css=1;
}
// --- /jeśli istnieje plik stary
}
// --- /pętla plików - test daty
// --- jeśli są nowsze pliki lub wymuszono uruchomienie
if ($czy_sa_nowsze_css==1) {
$str_suma_nowy="";
// --- pętla plików - odczyt
for ($pnr=0; $pnr<$plikow_css_ile; $pnr++) {
$temp_adres_stary=$st_tab_minifikator_css[$pnr];
$temp_regula_stary=$st_tab_minifikator_regula_css[$pnr];
// --- jeśli istnieje plik źródłowy
if (is_file($temp_adres_stary)) {
$str = file_get_contents($temp_adres_stary); // czytaj
if ($st_minifikator__przetwarzaj_css == 1) $str = minifikuj_css($str); // minifikuj
//
if ($pnr>0) $str_suma_nowy .= "\n";
if ($temp_regula_stary=="-") $str_suma_nowy .= $str;
if ($temp_regula_stary!="-") $str_suma_nowy .= "$temp_regula_stary{\n" . $str . "\n}";
}
// --- /jeśli istnieje plik źródłowy
}
// --- pętla plików - odczyt
// --- zapisz nowy plik z podsumowaniem
file_put_contents($temp_adres_nowy, $str_suma_nowy); // zapisz
// --- /zapisz nowy plik z podsumowaniem
}
// --- jeśli są nowsze pliki lub wymuszono uruchomienie
}
// --- /minifikuj CSS ----------------
// --- minifikuj JS ----------------
if ($st_minifikator__uruchom_js>0) {
// --- czytaj dane pliku docelowego
$temp_adres_nowy="zmienne/skrypty.js";
$data_nowy = 0;
if (is_file($temp_adres_nowy)) $data_nowy = filemtime($temp_adres_nowy);
if ($st_minifikator__uruchom_js==2) $data_nowy = 0;
// --- /czytaj dane pliku docelowego
// --- pętla plików - test daty
$czy_sa_nowsze_js = 0;
$plikow_js_ile = count($st_tab_minifikator_js);
//
for ($pnr=0; $pnr<$plikow_js_ile; $pnr++) {
$temp_adres_stary=$st_tab_minifikator_js[$pnr];
// --- jeśli istnieje plik stary
if (is_file($temp_adres_stary)) {
$data_stary = filemtime($temp_adres_stary);
if ($data_nowy < $data_stary ) $czy_sa_nowsze_js=1;
}
// --- /jeśli istnieje plik stary
}
// --- /pętla plików - test daty
// --- jeśli są nowsze pliki lub wymuszono uruchomienie
if ($czy_sa_nowsze_js==1) {
$str_suma_nowy="";
// --- pętla plików - odczyt
for ($pnr=0; $pnr<$plikow_js_ile; $pnr++) {
$temp_adres_stary=$st_tab_minifikator_js[$pnr];
$temp_naglowek_stary=$st_tab_minifikator_naglowek_js[$pnr];
// --- jeśli istnieje plik źródłowy
if (is_file($temp_adres_stary)) {
$str = file_get_contents($temp_adres_stary); // czytaj
if ($st_minifikator__przetwarzaj_js == 1) $str = minifikuj_js($str); // minifikuj
//
if ($pnr>0) $str_suma_nowy .= "\n";
$str_suma_nowy .= "/* $temp_naglowek_stary */\n" . $str;
}
// --- /jeśli istnieje plik źródłowy
}
// --- pętla plików - odczyt
// --- zapisz nowy plik z podsumowaniem
file_put_contents($temp_adres_nowy, $str_suma_nowy); // zapisz
// --- /zapisz nowy plik z podsumowaniem
}
// --- jeśli są nowsze pliki lub wymuszono uruchomienie
}
// --- /minifikuj JS ----------------
?>
Uruchamiane przy każdym otwarciu strony. Ew. nie uruchamiane, jeśli się zablokuje w ini.
1
@cerrato: A czy możesz wkleić jakiś przykładowy plik wejściowy oraz to, co zostanie z niego stworzone?
Tylko fragmenty:
CSS
/* --- html --- */
HTML {
border:0px solid red;
margin:0px;
padding:0px;
/* --- */
background-color:#ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
}
/* ---/ html --- */
/* --- body --- */
BODY {
border:0px solid green;
margin:auto;
margin-top:0px;
margin-bottom:0px;
padding:0px;
width:calc(100% - 10px); /* takie same wartości w elementach fixed */
max-width:900px; /* takie same wartości w elementach fixed */
/* --- potrzebne do pozycjonowania absolutnego elementów względem BODY */
position:relative;
border-top:1px solid transparent;
margin-top:-1px;
/* --- /potrzebne do pozycjonowania absolutnego elementów względem BODY */
/* --- */
}
/* --- body --- */
HTML{border:0px solid red;margin:0;padding:0;background-color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:12px;}
BODY{border:0px solid green;margin:auto;margin-top:0;margin-bottom:0;padding:0;width:calc(100% - 10px);max-width:900px;position:relative;border-top:1px solid transparent;margin-top:-1px;}
JS
/* --- rozwiń gałąż archiwum --- */
function rozwin_galaz_archiwum(id_galezi) {
var id_li = "li_" + id_galezi;
var id_div = "div_" + id_galezi;
/**/
document.getElementById(id_div).className = "arch_strzalka_rozwiniete";
document.getElementById(id_li).style.display = "block";
}
/* --- /rozwiń gałąż archiwum --- */
/* --- wyszukiwarka - wyślij zapytanie --- */
function wyszukiwarka_wyslij_zapytanie() {
var tyt=document.getElementById("szukaj_w_tytulach").checked;
var art=document.getElementById("szukaj_w_artykulach").checked;
var zapytanie=" ";
if (tyt===true) zapytanie="tyt";
if (art===true) zapytanie="art";
if ((tyt===true) && (art===true)) zapytanie="tyt art";
document.getElementById("p_kat").value=zapytanie;
}
/* --- /wyszukiwarka - wyślij zapytanie --- */
function rozwin_galaz_archiwum(id_galezi){var id_li="li_" + id_galezi;var id_div="div_" + id_galezi;document.getElementById(id_div).className="arch_strzalka_rozwiniete";document.getElementById(id_li).style.display="block";}
function wyszukiwarka_wyslij_zapytanie(){var tyt=document.getElementById("szukaj_w_tytulach").checked;var art=document.getElementById("szukaj_w_artykulach").checked;var zapytanie=" ";if(tyt===true)zapytanie="tyt";if(art===true)zapytanie="art";if((tyt===true)&&(art===true))zapytanie="tyt art";document.getElementById("p_kat").value=zapytanie;}
HTML
<!-- środek ============ -->
<div id="div_srodek">
<!-- środek środkowy ============ -->
<div id="div_srodek_srodek">
<!-- panel tekstowy ============ -->
<div id="div_panel_tekstowy"><?php include("div_srodek.php"); ?></div>
<!-- /panel tekstowy ============ -->
<!-- panel nad-tekstowy ============ -->
<div id="div_panel_nad_tekstowy"><?php include("div_menu_okruszkowe.php"); ?></div>
<!-- /panel nad-tekstowy ============ -->
</div>
<!-- /środek środkowy ============ -->
<!-- środek prawy ============ -->
<div id="div_srodek_prawy"><?php include("zmienne/div_panel_prawy.php"); ?></div>
<!-- /środek prawy ============ -->
<!-- środek lewy ============ -->
<div id="div_srodek_lewy"><?php include("zmienne/div_panel_lewy.php"); ?></div>
<!-- /środek lewy ============ -->
</div>
<!-- /środek ============ -->
<div id="div_srodek"><div id="div_srodek_srodek"><div id="div_panel_tekstowy"><?php include("div_srodek.php"); ?></div><div id="div_panel_nad_tekstowy"><?php include("div_menu_okruszkowe.php"); ?></div></div><div id="div_srodek_prawy"><?php include("zmienne/div_panel_prawy.php"); ?></div><div id="div_srodek_lewy"><?php include("zmienne/div_panel_lewy.php"); ?></div></div>