Arbetsprocess och publicering

Först skapade jag ett Auotomatisereinsg-repo på GitHub och gjorde det publikt.

Sedan initierade jag github i VSC med git init och skapade en ny branch med git checkout -b development, alltså en development branch för skapandet av sida och funktionalitet.

Sedan skapades .gitignore samt node_modules som återskapas med npm install. Detta gör i sin tur att dist genereras automatiskt vid build.

Sedan skapade jag package.json genom att mata in npm init -y i terminalen. Detta gör projektet till ett Node.js-projekt vilket krävs för Vite-bildoptimeringen.

Sedan körde jag npm install vite --save-dev node_modules/ vilket gör att vite läggs i devDependencies. Detta gör det möjligt att: köra dev-server som kan bygga minifierade produktioner Sen skapade jag vite.config.js och la in nödvändig kod för att påvisa att rotmappen är: ”webb”, vilket då Vite kommer använda som startpunkt, då alla HTML-filer ligger här.

Sedan när man kör npm run build hamnar allt i ”dist” utanför ”webb” för att få en separation mellan källkod och färdig webb.

Sedan testade jag att det funkar med npm run dev. Jag får då http://localhost:5173/ där jag kan se mina html-sidor som de ska se ut.

Jag kör sedan npm run build och får ”4 modules transformed”, vilket påvisar att mina HTML, CSS och JS-filer har blivit “bundlade” och optimerade.

Lägger sedan in import { imagetools } from 'vite-imagetools'; och rollupOptions: { så att bilder kan behandlas av Vite och därav optimeras. Alla bilder som importeras i JS eller CSS kan nu automatiskt optimeras Körde sedan npm install vite-imagetools --save-dev och la in plugginen i vite.config för att installera vite-imagetools för bildoptimeringen.

Sedan importerade jag bilderna från bilder.html till script och testade med npm run build att de automatiskt opitmerades. Ändrade sedan min bilder.html och min script.js så att de använder sig utav denna optimering.

Nu bör CSS och JS minifieras, Bilder optimeras automatiskt, HTML hämtar bilder dynamiskt via JS Skapade main branch med git checkout -b main och körde sedan npm run build för att initiera mappen dist/ med minifierad CSS/JS och optimerade bilder.

Allt som ska publiceras finns nu i dist/ Överförde sedan allt först till main-branch och testkörde. Insåg då att en del saker behövde städas för att sidan skulle fungera felfritt. Så jag skapade en main2, städade upp denna och testkörde den några gånger gör att försäkra att den fungerade som den skulle.

Sidan är nu publicerad via GitHub-pages och kommer automatiskt att uppdateras utifrån förändringar vie repot som sidan är kopplad till.

Verktyg som används

Visual Studio Code, GitHub, NodeJS