Share
HTML5 Boilerplate er anerkjent som et solid grunnlag for å bygge nye web-baserte nettsteder og applikasjoner. Når det er sagt, er få oppmerksom på at verktøyet tilbyr mer enn bare setter opp ditt utviklingsmiljø. Det hjelper deg også å "pakke opp" arbeidet ditt ved å gi en fantastisk plattformsbyggingsprosess.
Så hvorfor kan du trenge dette byggverktøyet? Fordi den er bakt inn i HTML5 Boilerplate, og kan hjelpe deg med å automatisere optimal ytelse av webytelsen. Vi valgte å gå med Apache Ant for å håndtere arbeidsbelastningen. Hvorfor det?
Alle andre verktøy har begrensninger som Ants originale forfatter ikke kunne leve med når man utvikler programvare på tvers av flere plattformer.
Mange utviklere er ikke kjent med byggeprosessen. Men ikke bekymre deg; et byggeverktøy er ikke et skummelt monster. Alt kan konfigureres gjennom en relativt enkel XML-fil. Denne artikkelen vil hjelpe deg å forstå hvordan du konfigurerer byggverktøyet, tilpasser byggeprosessen og endelig endrer variabler og kjører byggingen.
Byggeskriptet gjør noen forutsetninger om hvordan filene dine er sortert og strukturert. Her er mappestrukturen til HTML5 Boilerplate:
Accentsconagua
/ JS / libs / - inneholder vanlige skriptbiblioteker: Modernizr, jQuery og en pngfix for IE6/ Js / mylibs / - inneholder nettstedsspesifikke tilpassede bibliotekskript/plugins.js - alle jQuery-plugins/script.js - side / side spesifikk JavaScriptDe bygge/ mappen inneholder følgende elementer:
Apache Ants byggfiler er skrevet i XML. Denne filen inneholder vårt prosjekt (Boilerplate Build) og mål. Målene inneholder oppgaveelementer. Hvert oppgaveelement av buildfile kan ha en id attributt og kan senere refereres til av verdien som følger med den, som må være unik.
default.properties inneholder standardbyggingsalternativer, prosjektstruktur og hardcore-byggealternativer, som vi vurderer snart.
Denne filen definerer overstyringer for default.properties. Dette bør opprettes av en bruker når han eller hun må overstyre bestemte verdier. Derfor bør den ikke plasseres under versjonskontroll.
Verktøy er et sett med bunter, som inkluderer oppyipng, JPEGTran, YUI kompressor og HTML kompressor.
Fordi målet med byggverktøyet er å være plattform agnostisk, vurderer vi de nødvendige trinnene for å sette opp det, avhengig av hvilket operativsystem du har valgt..
brygge installasjon libjpeg optipng. Med MacPorts bruker du følgende installasjonskommando: portinstallasjon jpeg optipng apt-get installer libjpeg-progs optipng Byggverktøyet er ikke noe mer enn en XML-fil som er basert på Apache Ant. Nedenfor er en gjennomgang av den forhåndsdefinerte byggeprosessen. Disse elementene kan konfigureres ved å redigere build.xml fil.
?
/ JS / libs / filene er minifisert, men ikke sammenkoblet. Modernizr bør være alene i hode av dokumentet. jQuery kan bli trukket fra en CDN, og pngfix vil bare bli inkludert i IE6./ Js / mylibs / inneholder dine andre forskjellige JavaScript-biblioteker og plugins. Alle filer som er lagret her her, blir minifisert (med mindre de slutter med .min.js), og deretter sammenkoblet sammen.plugins.js og script.js, i / Js / mappe, er alle dine. Disse vil også bli minifisert og sammenkoblet med mylibs / filer.?
Alle CSS-filer blir minifisert ved hjelp av YUI-kompressoren. Ovennevnte Ant-skriptet vil kjøre style.css gjennom YUI kompressor for minifisering.
?
I HTML5 Boilerplate valgte vi å bruke OptiPng og jpegtran for bildeoptimalisering for henholdsvis PNG og JPG-bilder. Når det er sagt, er det mange bildeoptimeringsverktøy. Skulle du ønske det, kan du erstatte verktøyene med dine egne favorittoptimeringsverktøy.
For eksempel bruker Smush.it ImageMagick til å identifisere bildetypen og konvertere GIF-filer til PNG-filer. Den bruker deretter gifsicle for å optimalisere GIF-animasjoner ved å strippe repeterende piksler i forskjellige rammer.
? Kommenterer konsoll.log linjer
Filer som console.log, profilerings- og enhetstestingsfiler er ikke nødvendig for utgivelsen av nettstedet.
Oppført nedenfor er noen forskjellige alternativer for å redusere HTML-filene dine:
htmlbuildkit - Bevarer kommentarer, flere mellomrom og komprimerer inline JavaScript og CSS. htmlclean - Bevarer flere mellomrom, fjerner unødvendige sitater og komprimerer inline JavaScript og CSS htmlcompress - Fjerner unødvendige sitater og komprimerer inline JavaScript og CSS. HTML5 Boilerplate bruker spørringssnor for JavaScript / CSS-versjonering og cache-busting.
HTML5 Boilerplate bruker som standard søksnor for JavaScript / CSS versjonering og cache busting. Ulempen med denne tilnærmingen er at noen mellomliggende proxyer - og potensielt andre klienter - ikke kan cache eiendeler som inneholder spørringsstrenger. Dette skyldes grunnleggende heuristikker som flagger slike forespørsler som dynamiske data.
Byggverktøyet fjerner først søkestrengsversjonering og bruker automatisert baseline nummerering for frigjøringskontroll og cache-busting.
Ikke alle filene må publiseres. Et perfekt eksempel på dette ville være filer generert av versionsstyringssystem som subversion og git.
Som standard er det en liste over filtyper og kataloger som vil bli ekskludert. For å legge til i denne listen kan du søke og finne og legg til dine egendefinerte ekskluderinger til det.
Variabler i bygningsfilen er definert i default.properties og build.properties.
build.concat.scripts = true - Hvis satt, blir flere skriptfiler smurt sammen til en enkelt, sammenhengende fil.build.delete.unoptimized = true - Hvis de er satt, vil ikke-optimaliserte filer bli slettet.file.exclude = nonexistentfile - Ekskluderer filfilter for publisering (kan ikke være tomt).dir.publish = publiser dir.build = bygg dir.tools = $ dir.build / verktøy dir.test = test dir.demo = demo dir.js = js?
Prosjektstrukturen inneholder katalognavn, som de som er vist ovenfor, samt kjernen JS-mappen, JS-verktøybibliotekene og mappene som bare skal bli minifisert, men ikke sammenkoblede.
build.info = buildinfo.properties - Byggeversjonering er definerttool.yuicompressor = yuicompressor-2.4.2.jar - YUI Kompressor er definert med yuicompressor-2.4.2.jar Til slutt lærer vi nøyaktig hvordan du kan bruke byggverktøyet i prosjektene dine! Se følgende trinn for å kjøre byggverktøyet.
cd build / maur bygge skript-002.min.js), ser det etter noen HTML-kommentarer som refererer til begynnelsen og slutten av skriptblokken. For tiden ser det etter . Her er en liste over ulike byggalternativer som du kan velge mellom for å passe dine spesielle behov:
maur bygge - mindre html optimaliseringer (ekstra anførselstegn fjernet). inline script / style minified (standard)myr byggesett - alle html hvite plasser beholdes. inline script / style minifiedmyr minifisere - over optimaliseringer pluss full html-minifiseringmyrtekst - samme som bygge men uten bilde (png / jpg) optimaliseringPrestasjonsoptimalisering trenger ikke å være dyrt eller tidkrevende. Med noen gjenbrukbare regler kan man sakte sette opp en byggeprosess for å automatisere de repeterende aspektene av optimaliseringsarbeid. Apache Ant gir en kraftig, men likevel enkel å bruke rammeverk, mens HTML5 Boilerplate utnytter det for å gjøre weboptimalisering så enkelt som mulig for front-end webutviklere. Takk så mye for å lese!
