Frontend, pracovní postupy a nástroje rubrika: Programování: Jiné

2 takyhonza
položil/-a 7.12.2016

Hezký večer vespolek.

Mám takovou teoretickou otázku. Programuji webové stránky a aplikace a aktuálně řeším, jak vylepšit svoje pracovní postupy, hlavně co se tvorby frontendu týče. Pro frontend existuje řada package managerů (Bower,...), nástrojů jako Grunt, Gulp, Webpack, CSS preprocesorů (LESS, SASS,...), atd. Člověk se v tom snadno ztratí. Neřeším teď, které nástroje jsou lepší, které nejsou, spíš mě zajímá, jak by se tyto nástroje použily v případě řešení konkrétního problému. Rád bych každý z těch nástrojů vyzkoušel, ale existuje jich tolik, že je nesmysl na každém novém projektu nasazovat něco jiného. A tak mě napadlo, že o pomoc požádám vás. Vymyslel jsem takové zjednodušené "typické" zadání, se kterým se na projektech obvykle setkávám, a rád bych vás požádal, abyste sem napsali, jak byste to řešili pomocí svých oblíbených nástrojů a technologií.

Děkuji předem každému, kdo se zapojí.

Zadání:

  • máme HTML stránku reprezentovanou souborem index.html
  • na této stránce máme textareu, která je obalena CKEditorem (nebo nějakým jiným podobným WYSIWYG editorem)
  • dále máme soubor assets/web.js, který obsahuje nějaký kód specifický pro daný web, např. inicializaci a nastavení WYSIWYG editoru
  • a pak tu máme soubor assets/web.css, který obsahuje CSS styly pro daný web

Teď to přijde :)

  • WYSIWYG by mělo jít pohodlně nainstalovat jediným příkazem včetně případných závislostí (abych to nemusel stahovat ručně)
  • všechny JS skripty (WYSIWYG editor, jeho pluginy, jazykový balíček pro ČJ,... a soubor assets/web.js) by měly být spojeny do jediného souboru assets/main.js
  • stejně tak všechny CSS styly (WYSIWYG editor,... a soubor assets/web.css) by měly být spojeny do jediného souboru assets/main.css
  • soubor index.html pak už linkuje jenom soubory assets/main.css a assets/main.js, nic jiného
  • samozřejmě by se měly v pořádku načítat všechny ostatní vyžadované soubory - ikonky WYSIWYG editoru, apod.

Těším se na vaše odpovědi, náměty a rady.

Díky.

odkaz
8 vojta.tranta
odpověděl/-a 7.12.2016

OK, tak jako WYSIWYG se dá použít ckeditor http://ckeditor.com/.

Takže není problém udělat skript, který nainstaluje ckeditor jako takový, pak je ale potřebuje udělat skript, který pro něj vytvořít konfigurační soubor, do node_modules se přidá výchozí config.js a ten je třeba upraivt a nastavit tam správný jazyk a podle nastaveného jazyka takvé vytáhnout správný jazykový soubor a přidat ho do seznamu skriptů na concatování.

To samé je třeba udělat s css, ckeditor má několik skinů, které mají svoje css a je jich tam sposuta - hlavní css, pro ie8 atd - všechny skiny mají ale stejnou souborovou strukturu, takže bude stačit do konfiguráku vyjmenovat css, která se mají concatnout a jeden obrázkový sprite, který je pro každý skin též pojmenovaný stejně.

Na orchestraci něčeho takového jQuery-like stylu je nepoužitelný chytrý balíčkovač jako je webpack, protože mezi javascriptem a css souboru není žádná vazba (javascript neimportuje css, css se navzájem také neimportují) - tudíž se nedá použít Webpack, který potřebuje nějaký explicitní vztah bezi soubory - import, require, es6 import apod.
Tudíž všechno bude třeba udělat ručně.

Na takový úkol se nejlépe zřejmě hodí Gulp, tam se dá napsta všechno pěkně ručně. Tedy v postup v bodech.

  • vytvořit si vlastní npm balíček, který má jako závislost CKeditor
  • vytvořit si v gulpu následující tasky
    -- vytažení hlavního .js souboru ckeditoru a přidání do pole všeho potřebného JS
    -- vytažení souboru .js jazyka, který se bude používat a přidání do pole
    -- vytažení .js souboru skinu, který se použije a přidání do pole
    -- vytažení .css souborů pro daný skin a přidání do pole css
    -- vyžení image spritu ze skinu a přidání do pole ke kopírování, pamatovat si, že se musí zachovat správná relativní cesta vůči .css souboru ze skinu
    -- vytvoření vlastního config.js souboru podle zákaldního configu který je stažený spolu s ckeditorem
    -- přidání nastavení jazyka
    -- přidání nastavení skinu
    -- přidat vlastní config.js do pole js sobuorů
    -- concatovat celé pole .js souborů do jednoho main.js
    -- concaatovat potřebné .css soubory do jednoho main.css souboru
    -- zkopírování souborů main.css main.js a image sprintu do požadované cesty
  • tenhle NPM balíček by se mohl jmenovat řeba add-wysiwyg
  • používal by se takto
    -- globálně by se nainstaloval do systému npm i -g add-wysiwyg
    -- a pak třeba příkaz add-wysiwyg cs mono ./projects/new-project/assets/ by vytvořil ve složce /projects/new-project/assets/ instalaci ckeditoru se skinem mono, jazykem cs instalace by vypadala tak, že by tam byl main.js, main.css a image sprite, jak jsem popsal výše

Komentáře

  • takyhonza : Díky moc za odpověď. To by asi šlo, i tak mě ale trápí to kopírování obrázkových assetů (ikonek,..) - není asi problém ty assety zkopírovat někam, kam budou odkazovat relativní cesty z main.css, co ale možnost kolize s ostatními balíčky? Co když stáhnu další balíček, který bude mít stejnou či podobnou strukturu a stejně pojmenované image sprity jako skiny CKEditoru? Ślo by třeba upravit to kopírování tak, aby se soubory vždy kopírovaly do složky, která bude obsahovat název balíčku a cesty v main.css následně upravit pomocí PostCSS (pokud něco takového umí). Pokud budu uvažovat tu úpravu cest, pak bych ale nemusel řešit kopírování a mohl tahat ty sprity rovnou ze složky balíčku (třeba bower_components|node_modules/ckeditor/...)? Jak třeba ty řešíš možnost kolize při kopírování? Vyplatí se to vůbec řešit, nebo je to blbost? :) 8.12.2016
  • vaclav.sir : To, že mezi soubory neexistuje explicitní vztah, vyřešíš ve Webpacku buďto vytvořením entry pointu, do kterého si je naimportuješ, nebo tím, že všechny tyto "orphan" assety přidáš do configu jako entry pointy. 8.12.2016
  • vojta.tranta : @takyhozna přesně jak řiká @vaclav.sir S CSS není problém, pokud budeš mít další css ve svém projektu a budeš používat třeba less nebo sass nebo postcss, tak prostě vytvořít entry point, kam si všechny potřebná CSS naimportuješ a z toho souboru si už vygeneruješ hlavní CSS, to už není problém. Rozumíme si? Postup zůstane stejný, jen budeš mít nějaký entry.css kde budeš mít naimportované všechny CSS v projektu a jeto. 9.12.2016
  • takyhonza : Myslím, že si rozumíme. Díky hoši. 11.12.2016

Pro plný přístup na Devel.cz se prosím přihlaste:

Rychlé přihlášení přes sociální sítě:

Nebo se přihlaste jménem a heslem:

Zadejte prosím svou e-mailovou adresu.
Zadejte své heslo.