Frontend, pracovní postupy a nástroje rubrika: Programování: Jiné
2
takyhonza
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 souboruassets/main.js - stejně tak všechny CSS styly (WYSIWYG editor,... a soubor
assets/web.css) by měly být spojeny do jediného souboruassets/main.css - soubor
index.htmlpak už linkuje jenom souboryassets/main.cssaassets/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.
6
vojta.tranta
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
Pro plný přístup na Devel.cz se prosím přihlaste:
Nebo se přihlaste jménem a heslem:
Komentáře