Oddělte čitelnost od velikosti souboru
Formátovač uspořádá mezery a konce řádků, aby člověk mohl kód zkontrolovat. Minifikátor odstraní některé mezery nebo komentáře a zmenší přenášený text. Jde o odlišné cíle: čitelné CSS pomáhá při úpravách, zatímco kompaktní CSS může být vhodné do zveřejněného souboru. Ani jedna operace neopraví chybný kód sama. MultiVerto nabízí samostatné nástroje pro formátování a minifikaci CSS a HTML, formátovač JavaScriptu i čitelný a kompaktní výstup JSON. Zvolte nástroj podle skutečného jazyka vstupu. JSON není libovolný JavaScript a stránka HTML není totéž co XML. Původní soubor si ponechte, abyste mohli výsledek porovnat a nevhodnou úpravu zahodit.
Konkrétní příklad CSS
Začněte řetězcem h1{color:#334155;margin:0;}p{line-height:1.5;}. Formátovač CSS přesune pravidla a deklarace na samostatné odsazené řádky. Snáze uvidíte, že h1 má dvě deklarace a p jednu. Minifikátor CSS může vrátit řetězec podobný vstupu po odstranění zbytečných mezer a posledního středníku před uzavírací složenou závorkou. Po převodu zkontrolujte barvy, selektory a hodnoty vlastností. Ve vloženém formátovači změňte jednu deklaraci a sledujte, kde se objeví v čitelném výstupu. Potom výsledek vložte do propojeného minifikátoru. Na skutečném webu porovnejte vypočítané styly v prohlížeči na reprezentativních stránkách; syntakticky přijatelný řetězec nedokazuje stejné chování všech selektorů.
- Originál → formátovat pro čtení
- Ověřit syntaxi a chování v aplikaci
- Minifikovat kopii → znovu otestovat vydaný soubor
Respektujte hranice jazyků
Nástroj pro čitelný JSON vstup parsuje a znovu serializuje s odsazením; kompaktní nástroj serializuje naparsovanou hodnotu bez volitelných mezer. Kontroluje tak syntaxi JSON, nikoli datové schéma. Parsování a serializace mohou změnit textové detaily, třeba mezery, zápis čísel nebo prezentaci klíčů; záleží-li na přesném textu, porovnejte hodnoty. HTML obsahuje textové uzly, kde mohou mít mezery význam, takže konzervativní minifikátor nemusí odstranit všechny mezery u vloženého obsahu. CSS má řetězce, funkce a komentáře vyžadující znalost syntaxe. JavaScript je ještě složitější: jednoduchý formátovač MultiVerto záměrně odmítá některé konstrukce včetně šablonových řetězců a určitých kontextů regulárních výrazů. Pro produkční kód s širší syntaxí zvolte plnohodnotný parserový nástroj pro sestavení.
Kontrolujte ve správném pořadí
Nejprve pracujte s malou reprezentativní kopií. Spusťte formátování, porovnejte výstup se vstupem a ověřte, že řetězce, komentáře a zvláštní znaky zůstaly tam, kde je aplikace potřebuje. Pokud nástroj vstup odmítne, přečtěte chybu místo přesunu do nástroje pro jiný jazyk. Teprve když čitelná verze projde kontrolou, podle potřeby použijte odpovídající minifikátor. Upravený soubor otestujte ve skutečném prohlížeči nebo aplikaci včetně stavů závislých na mezerách, selektorech a textových hodnotách. Výstup JSON znovu naparsujte a porovnejte datovou strukturu. Pro CSS a HTML potřebujete vizuální kontrolu a projektové testy; samotné formátování stejné chování nezaručuje.
Znejte hranice možností nástroje
Formátovač není čističem nedůvěryhodného HTML a minifikace nechrání zdrojový kód ani tajemství. Soukromé klíče či přihlašovací údaje nevkládejte do veřejné ukázky. Odstranění komentářů může smazat licenční oznámení nebo značky, které má proces vydání zachovat; ověřte to před minifikací. Používá-li pravidlo CSS neobvyklou syntaxi nebo příklad JavaScriptu obsahuje šablonový řetězec, vyberte nástroj s výslovnou podporou a výsledek zkontrolujte. Při neúspěšném převodu je chyba lepší než odhadnutý kód. Tyto lokální nástroje v prohlížeči pomáhají při kontrole a menších úpravách. Pro zveřejnění patří kroky do verzovaného sestavovacího procesu s testy souborů, které uživatelé skutečně načtou. U stylů kromě úvodní stránky zkontrolujte i malé obrazovky, tiskový režim a stavy ovládacích prvků, které se zobrazí až po kliknutí. Pravidlo CSS může vypadat beze změny, ale jiný soubor, pořadí načítání nebo chyba jinde v projektu mohou výsledek změnit. Zachování originálu a porovnání reálného zobrazení je proto důležitější než samotný rozdíl v počtu znaků.