support@binaer.dk +45 93 87 10 87 /BinaerWeb
Det ultimative Shoporama udvikler setup

Det ultimative Shoporama udvikler setup

Bjørn Nyborg
Bjørn Nyborg

Efter at have udviklet flere Shoporama-temaer, har jeg gentagne gange irriteret mig over at skulle uploade hver enkelt fil, jeg ændrer i. Derfor tænkte jeg som de fleste udviklere ville gøre: "Det må kunne automatiseres". Og ganske rigtigt, det kunne det. Resultatet af denne tanke er blevet det, jeg har kaldt en "Shoporama Boilerplate".

Hvis du bare vil i gang med at bruge setuppet, så kan du finde koden på github:

Shoporama Boilerplate

Features

Hvorfor?

Når man arbejder med Shoporama på den traditionelle måde, skal man manuelt uploade alle filer, man ændrer, via. SFTP. Det tager ikke mange sekunder, men man er alligevel nødt til at skifte vindue, finde den pågældende fil og derefter uploade den. Over en udviklingsperiode med flere hundrede filer og mange tests bliver det til RIGTIG mange manuelle uploads. Alle disse manuelle uploads, kan undgås med dette setup.

Udover de mange manuelle uploads, brugte jeg også tidligere et par timer på at opsætte den rigtige build pibeline for mine forskellige assets (js, less, svg og grafik), dette er nu alt sammen inkluderet i en boilerplate. For at du kan starte et nyt projekt, skal du bare downloade boilerplaten og lave en ny konfigurationsfil – så er du i gang – det tager kun 5 min.

Automatisk upload til SFTP

Når man arbejder med min Shoporama-boilerplate, har man to watchers kørende i baggrunden, de hedder "Start" og "Live"

Start-watcheren
Denne watcher holder øje med hvilke filer, du retter i, og bygger disse filer og lægger dem i dist mappen.

Live-watcheren
Den anden watcher holder øje med hvilke filer, der bliver bygget, og uploader dem til SFTP.

Man kan sagtens køre med "Start" uden at køre med "Live", på den måde kan man arbejde lokalt, uden at uploade til SFTP hele tiden. Når man så er klar til at lægge alle ændringerne op, bruger man "Deploy" kommandoen.

Brug 2 terminaler til at køre hhv. "Live" og "Start" kommandoerne.

Brug 2 terminaler til at køre hhv. "Live" og "Start" kommandoerne.

LESS Pre-processor

Jeg har valgt at bruge LESS som pre-processor, da det er simpelt og intuitivt. Er du mere til SASS/SCSS, eller måske endda PostCSS? Så kan du nemt ændre pre-processor i gulpfile.js til din foretrukne. Hvis du vælger at implementere en ny pre-processor, så lav gerne et PR til mit repo, så andre kan få gavn af det i fremtiden.

SVG sprites

Ikoner håndterer vi ved at samle alle SVG-filer i en enkelt sprite-fil. På den måde behøver brugerne kun at downloade en enkelt fil for at have alle ikoner tilgængelige.

Man kan derefter inkludere hver enkelt ikon og style dem som om, de var i hver deres fil.

Eksempel på indsættelse af SVG:

<svg>
   <use xlink:href="/symbol/svg/sprite.symbol.svg#check"></use>
</svg>

Bemærk hashværdien i slutningen af linket (#check), denne hash afgør hvilket ikon bliver inkluderet.

Babel-kompilering af js-filer

For at vi kan udnytte de nyeste features i javascript, men stadig køre koden i ældre browsere, bruger vi babel til at omskrive ny kode til kode som ældre browsere kan forstå.

På denne måde kan vi arbejde med de nyeste funktioner i javascript, men samtidig understøtte ældre browsere.

Optimering af billedgrafik

Alle billeder, som vi bruger i temaet, bliver kørt igennem et automatisk billed-optimerings-værktøj, der sørger for at filerne aldrig er unødvendigt store.

Til det formål bruger vi: imagemin