Exportera

När du väl är nöjd med en design kan du exportera den som en vanlig statisk webbplats, bestående av HTML, CSS, JS och bilder. Bootstrap Studio gör detta enkelt - klicka bara på knappen Exportera från huvudverktygsfältet eller använd kortkommandot Ctrl/Cmd + E.

Exportinställningar

Ett antal exportinställningar finns tillgängliga, som kan påverka hur HTML-kod genereras.

Här är en snabb genomgång av alternativen:

• Minifiera JavaScript och CSS - Allt extra blanksteg kommer att tas bort från .js- och .css-resurser, vilket minskar filstorleken men gör dem också svårare att läsa.
• Använd ett CDN för bibliotek - jQuery-biblioteket, bootstrap-ramverksresurser och använda ikontypsnitt kommer att länkas från en CDN-leverantör för extra prestanda. När de är inaktiverade inkluderas de som lokala filer.
• Hoppa över oanvända bilder - Skannar om bilderna du har importerat i din design används eller inte, och skriver bara de som är det till disken.
• Exportera etiketter - Etiketter är ytterligare textelement som visas bredvid dina komponenter i Översiktspanelen. Normalt ignoreras de vid export, men om du aktiverar det här alternativet kommer de att infogas som <!-- Start: XXX --> och <!-- End: XXX --> kommentarer i HTML-koden.
• Minifiera HTML - Aktivera det här alternativet om du vill ta bort extra blanksteg från den exporterade HTML-koden.
• Använd absoluta sökvägar - Alla webbadresser för sidor, CSS, JS, bilder och andra resurser kommer att ha ett snedstreck före (/).
• Versionstillgångar - När det här alternativet är aktiverat lägger det till innehållshashar till alla tillgångswebbadresser, vilket tvingar webbläsaren att alltid uppdatera en ny version av nämnda resurser (cache-busting).
• Exportera SASS - Om du har SASS-filer i din design, slå på det här alternativet för att få SASS-källorna exporterade. Som standard skrivs endast den kompilerade css till disken.
• Webbadress - En textinmatning för att ange webbadressen som du planerar att ladda upp din webbplats på. Den används när appen genererar webbplatskartor och Facebook/Twitter-metataggar.

Spara dina inställningar, och nästa gång du klickar på knappen Exportera visas din design kommer att skrivas till mappen du har valt.

Exportera en enda sida

Om din design består av flera sidor kan du bara exportera en specifik. Högerklicka bara på sidan i Designpanelen och välj Exportera. Detta kommer att skriva endast den valda sidan och tillsammans med CSS- och bildfilerna som den använder.

Anpassad export

För en mer finkornig upplevelse kan du välja menyn Arkiv > Exportera > Anpassad export. I dialogrutan kan du filtrera filer efter typ och bara välja de filer som du vill exportera.

Exportera Scripts

För avancerade användare av appen finns det också möjlighet att konfigurera Export Scripts. Denna avancerade funktion låter dig programmera ett skript som körs varje gång du exporterar din design. Du kan använda dem för att byta namn på filer, flytta bilder, köra saker som eslint eller till och med ladda upp din webbplats automatiskt till din server.

För att göra något av detta måste du vara bekväm med att skriva koda. Det är därför funktionen är dold i området Avancerat i Exportinställningar:

Du pekar på en körbar fil någonstans på din disk. Detta kan vara ett skalskript eller ett kompilerat program. Det enda kravet är att det kan köras från en terminal och inte väntar på användarinput.

Mac/Linux

För macOS och Linux är skalskript ett enkelt men kraftfullt alternativ för att skriva exportskript. Exportdestinationssökvägen skickas som arg 1, så du måste cd $1 för att navigera till mappen med de exporterade filerna.

Här är ett exempel, skrivet i bash, som ändrar förlängningen av din indexfil till php:

<span class="token shebang important">#!/bin/bash</span>
<span class="token builtin class-name">cd</span> <span class="token variable">$1</span>
<span class="token function">mv</span> index.html index.php

Kom ihåg att markera skriptet som körbart, så att operativsystemet kan starta det som ett program:

<span class="token function">chmod</span> +x
yourscript.sh

För mer komplexa uppgifter kan du skriva dina skript i Node, Python, Ruby, PHP eller något annat som du känner dig bekväm med. Se bara till att skriptet är markerat som körbart och att raden #! läggs till så att tolken kan lokaliseras av OS.

Windows

För Windows skulle vanliga batchfiler eller kompilerade program fungera. Exportdestinationssökvägen skickas som arg 1, så du måste cd %1 för att navigera till mappen med de exporterade filerna.

Här är ett exempel på en batchfil som byter namn på din index.html-fil till php:

@ECHO  OFF
cd %1
move index.html index.php

Spara detta som en textfil med tillägget bat. Detta behövs så att Windows vet att den här filen körs som ett program.

Viktigt

Många Windows-batchexempel du kan hitta online, lägg till ett PAUSE-kommando i slutet av skriptet. Lägg inte till detta i dina exportskript, eftersom det kommer att göra att skriptet hänger sig och tar upp minne när det startas av Bootstrap Studio.

Ett alternativ för att skriva dina skript är att använda bättre exportfunktion för att kompilera din skript som en körbar fil.

Ställa in skriptet att köras

Allt som återstår är att berätta för Bootstrap Studio att köra ditt skript vid export. Med din design laddad öppnar du dialogrutan Inställningar och väljer posten Exportera till vänster. Expandera sedan avsnittet Avancerat, klicka på knappen Bläddra och leta reda på ditt exportskript.

Felhantering

Om ditt skript skickar några fel eller loggmeddelanden kommer de att skrivas till en error.log-fil i exportmappen. Du kan använda den för att felsöka potentiella problem.

Du kan kolla in ett mer komplext exempel på att publicera din webbplats till Github-sidor automatiskt efter en export.