Share
Yeomans generatorer er det som gir plattformens fleksibilitet, slik at du kan gjenbruke det samme verktøyet for alle typer prosjekt du kan jobbe med, JavaScript eller på annen måte, og det er før jeg nevner det enorme biblioteket med over 400 samfunnsinnbetalte generatorer. Noen ganger kan du imidlertid ha noe spesifikt oppsett som du liker å ansette i dine egne prosjekter, og i slike situasjoner er det fornuftig å abstrahere alle kjeleplaten i din egen generator.
I denne artikkelen vil vi bygge en Yeoman-generator som gjør at vi kan bygge et enkelt sideområde, en rad om gangen, det er et ganske enkelt eksempel, men det vil tillate oss å dekke mange av de mer interessante funksjonene Yeoman gir.
Jeg kommer til å anta at du har Node.js-oppsett, hvis ikke, kan du ta tak i installasjonen herfra. I tillegg må vi ha Yeoman installert så vel som generatoren for å skape generatorer. Du kan oppnå dette via følgende kommando til NPM:
npm installer-generator generator
Til slutt må vi opprette selve prosjektet, så naviger til mappen du velger og kjøre:
yo generator
Dette vil starte generatoren og stille deg noen spørsmål som prosjektnavnet og din GitHub-konto, for denne artikkelen skal jeg nevne generatoren min en side.
Ikke vær redd for det store antallet filer som genereres av kommandoen, det vil gjerne gi mening på et øyeblikk.
De første parfilene er dotfiles for forskjellige ting som Git og Travis CI, vi har en package.json fil for generatoren selv, a readme fil og en mappe for tester. Dessuten får hver kommando i generatoren vår en mappe med en index.js fil og en mappe for maler.
De index.js filen må eksportere selve generatorobjektet som vil bli drevet av Yeoman. Jeg skal tømme alt inni selve generatoren, slik at vi kan starte fra begynnelsen, her er hvordan filen skal se ut etter det:
Accentsconagua
'bruk streng'; var util = krever ('util'); var sti = krever ('sti'); var yeoman = krever ('yeoman-generator'); var kritt = krever ("kritt"); var OnepageGenerator = yeoman.generators.Base.extend (); module.exports = OnepageGenerator; En Yeoman Generator kan strekke seg fra to forskjellige forhåndsbygde alternativer: Utgangspunkt generator, som du kan se denne en arver fra, eller NamedBase generator, som faktisk er det samme, bortsett fra det legger til en enkelt parameter som brukeren kan angi når de kaller generatoren din. Det spiller ingen rolle for mye hvilken du velger, du kan alltid legge til parametre manuelt hvis du trenger mer.
Alt som denne koden gjør er å skape dette generasjonsobjektet og eksportere det, Yeoman vil faktisk hente det eksporterte objektet og kjøre det. Måten den går, er ved å først ringe konstruktormetoden for å sette objektet opp, og det vil gå gjennom alle metodene du lager på dette objektet (i rekkefølgen du opprettet dem) og kjøre dem en om gangen. Dette betyr at det ikke virkelig betyr noe for hva du kaller funksjonene, og det gir deg fleksibiliteten til å nevne ting som gir mening for deg.
Nå, den andre tingen du bør vite er at Yeoman har sine egne funksjoner for å håndtere filsystemet som virkelig hjelper deg med stier. Alle funksjonene du vanligvis vil bruke som mkdir, lese, skrive, kopiere, etc, har blitt levert, men Yeoman vil bruke malkatalogen i denne kommandoenes mappe som vei for lesing av data og mappen brukeren kjører generatoren som roten for utmatning av filer. Dette betyr at du ikke engang trenger å tenke på de fullstendige banene når du arbeider med filer, du kan bare kjøre kopi og yeoman vil håndtere de to forskjellige stedene for deg.
Yeoman lar deg legge til spørsmål i generatoren din slik at du kan motta innspill fra brukeren og tilpasse oppførselen på riktig måte. Vi skal ha to spørsmål i vår generator. Den første er navnet på prosjektet, og det andre er om du vil inkludere en dummy-seksjon som et eksempel.
For å oppnå dette vil vi legge til en funksjon som vil be om brukeren for disse to bitene av info og deretter lagre resultatene på selve objektet vårt:
var OnepageGenerator = yeoman.generators.Base.extend (promptUser: function () var done = this.async (); // har Yeoman hilse brukeren console.log (this.yeoman); var prompts = [navn: 'appName', melding: 'Hva er appens navn?', type: 'bekreft', navn: 'addDemoSection', melding: 'Vil du generere en demoseksjon?', standard: true ]; this.prompt (prompts, funksjon (rekvisitter) this.appName = props.appName; this.addDemoSection = props.addDemoSection; done (); .bind (dette)););
Den første linjen inne i funksjonen setter a ferdig variabel fra objektets async metode. Yeoman prøver å kjøre metodene dine i den rekkefølgen de er definert, men hvis du kjører noen asynk-kode, avslutter funksjonen før det faktiske arbeidet blir fullført, og Yeoman starter den neste funksjonen tidlig. For å komme seg rundt dette, kan du ringe til async metode som vil returnere tilbakekalling, og deretter vil Yeoman vente på å gå videre til neste funksjon inntil tilbakeringingen blir utført, som du kan se det gjør på slutten, etter å ha bedt brukeren.
Den neste linjen der vi bare logger yeoman, det er Yeoman-logoen som du så da vi kjørte Yeoman-generatoren like før. Deretter definerte vi en liste med spørsmål, hver melding har en type, et navn og en melding. Hvis ingen type ble angitt, vil den som standard bli standardinngang. Det er mange kule inputtyper som lister, boksene og passordene, du kan se hele listen her. I vår søknad bruker vi en tekstinngang og en "bekreft" (ja / nei) type inntasting.
Med en rekke spørsmål klar, kan vi sende det til prompt metode sammen med en tilbakeringingsfunksjon. Den første parameteren for tilbakeringingsfunksjonen er listen over svar mottatt tilbake fra brukeren. Vi legger da disse egenskapene på vårt hovedobjekt og ringer til ferdig metode for å gå videre til neste funksjon.
Vår søknad har det ytre skjelettet, som inkluderer topptekst, meny, footer og noen CSS, og så har vi det indre innholdet som vil gå i sin egen katalog sammen med en egendefinert CSS-fil per seksjon. Dette vil tillate deg å sette globale egenskaper i hovedfilen og tilpasse hver rad i seg selv.
La oss starte med headerfilen, bare opprett en ny fil i mappen katalog som heter _header.html med følgende:
<%= site_name %>
Filnavnene trenger ikke å starte med en understreking, men det er en god praksis å skille navnet fra det endelige utgangsnavnet slik at du kan fortelle hvilken du har å gjøre med. Også, du kan se at i tillegg til å inkludere vår viktigste CSS-fil, inkluderer jeg også Semantisk brukergrensesnittbibliotek som et rutenett for rader og på menyen (for ikke å nevne den flotte stylingen).
En annen ting du kanskje har lagt merke til, har jeg brukt en EJS-stylet plassholder for tittelen, og den vil bli fylt ut på kjøretid. Yeoman bruker Underscore maler (vel, 10 dash) og som sådan kan du lage dine filer som dette, og dataene vil bli generert på runtime.
Neste, la oss lage footer (legg dette i en fil som heter _footer.html i maler-mappen):
Det lukker bare HTML-dokumentet for oss, da vi ikke vil ha noen JavaScript i vår søknad. Den siste HTML-filen som kreves for ytre stillas er menyen, vi skal generere de faktiske koblingene ved kjøretid, men vi kan skrive den ytre beholderen i en malfil som heter _menu.html:
Det er en vanlig div med noen klasser levert av Semantisk brukergrensesnitt. Vi vil trekke inn de faktiske koblingene basert på de genererte seksjonene senere. Neste, la oss lage _main.css fil:
kropp margin: 0; font-familie: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
Bare noen kode for å hjelpe med menyposisjonering og endre skrift, men det er her du kan sette standardstiler du vil ha på hele dokumentet. Nå må vi lage maler for de enkelte seksjonene og deres tilhørende CSS-filer. Disse er ganske grunnleggende filer, da vi vil la dem være ganske tomme for brukeren å tilpasse, så inne i _section.html legg til følgende:
<%= content %>
Bare en ytre div med et unikt id som vi vil generere basert på seksjonens navn og en klasse for det semantiske rutenettet. Så inne, jeg har nettopp lagt til en H1 tag som igjen vil bare inneholde seksjonens navn. Neste, la oss lage CSS-filen, så opprett en fil som heter section.css med følgende:
#<%= id %>bakgrunn: #FFFFFF; farge: # 000;
Dette er mer en plassholder med samme ID som den ytre beholderen, men det er vanlig å endre bakgrunnen til hver rad for å skille innholdet, så jeg la til den egenskapen for enkelhets skyld. Nå, for å fullføre skyld, la oss lage en fil som heter _gruntfile.js men vi vil fylle den senere og la oss fylle ut _package.json fil som ble levert:
"navn": "appnavn", "versjon": "0.0.0", "devDependencies": "grunt": "~ 0.4.2", "grunt-contrib-connect": "~ 0.6.0" "grunt-contrib-concat": "~ 0.3.0", "grunt-contrib-cssmin": "~ 0.7.0"
Det er litt av en spoiler om hva vi skal gjøre senere, men det er avhengighetene vi trenger for våre Grunt-oppgaver.
Med alle disse filene klare, la oss gå til å legge til metodene for å bygge opp et nytt prosjekt. Så tilbake i vår index.js fil, rett etter promptUser metode, la oss legge til en funksjon for å lage alle mappene vi trenger:
stillasmapper: funksjon () this.mkdir ("app"); this.mkdir ( "app / css"); this.mkdir ( "app / i"); this.mkdir ( "bygge"); , Jeg la til en app mappe og innsiden, to flere kataloger: css og seksjoner, Det er her sluttbrukeren vil bygge der applikasjon. Jeg har også laget en bygge mappe som er hvor de forskjellige seksjonene og CSS-filene vil bli samlet sammen og innebygd i en enkelt fil.
Deretter legger vi til en annen metode for å kopiere over noen av våre maler:
copyMainFiles: funksjon () this.copy ("_ footer.html", "app / footer.html"); this.copy ("_ gruntfile.js", "Gruntfile.js"); this.copy ("_ package.json", "package.json"); this.copy ("_ main.css", "app / css / main.css"); var context = site_name: this.appName; this.template ("_ header.html", "app / header.html", kontekst); , Her bruker vi to nye metoder, kopiere og mal, som er ganske like i funksjon. kopiere vil ta filen fra maler katalogen og flytte den til utdatamappen, ved hjelp av de angitte banene. mal gjør det samme, bortsett fra før du skriver til utdatamappen, kjører den gjennom Underscores templeringsfunksjon sammen med konteksten for å fylle ut plassholderne.
Jeg kopierte ikke menyen enda, for det er fordi vi må generere koblingene, men vi kan egentlig ikke generere koblingene før vi legger til demo-delen. Så den neste metoden vi lager, vil legge til demo-delen:
generereDemoSection: funksjon () if (this.addDemoSection) var context = innhold: "Demoseksjon", id: dette ._. klassifisere ("Demoseksjon") var fileBase = Date.now () + "_" + dette ._. understreket ("Demoseksjon"); var htmlFile = "app / sections /" + fileBase + ".html"; var cssFile = "app / css /" + fileBase + ".css"; this.template ("_ section.html", htmlFile, kontekst); this.template ("_ section.css", cssFile, kontekst); , En annen funksjon som du kanskje ikke er kjent med er klassifisere funksjon, som er gitt til deg av Underscore Strings. Hva det gjør er at det tar en streng og det skaper en "klasse" -versjon av den, den vil fjerne ting som mellomrom og lage en kamelformet versjon, egnet for ting som HTML-klasser og IDer; streket gjør det samme unntatt i stedet for kamel-casing det slange-faller dem. Dessuten er det alle ting vi har gjort i den forrige funksjonen, det eneste andre som er verdt å nevne er at vi forventer et tidsstempel, både for å holde filene unike, men også for å bestille. Når vi laster inn filene, er de alfabetisert, slik at de har tid da prefikset vil holde dem i orden.
Den siste filen som må kopieres over, er menu.html fil, men for å gjøre det, må vi generere linkene. Problemet er at vi ikke vet på dette stadiet hvilke filer som ble generert før, eller hvis brukeren lagt til seksjoner manuelt. For å bygge opp menyen, må vi lese fra utgangsstien og etter å ha lest delene som finnes der, må vi bygge menykoblingene. Det er en håndfull nye funksjoner som vi ikke har brukt ennå, så vi vil gå gjennom det linje for linje:
generateMenu: function () var menu = this.read ("_ menu.html"); var t = '<%= name %>'; var files = this.expand ("app / sections / *. html"); for (var i = 0; i < files.length; i++) var name = this._.chain(files[i]).strRight("_").strLeftBack(".html").humanize().value(); var context = name: name, id: this._.classify(name) ; var link = this.engine(t, context); menu = this.append(menu, "div.menu", link); this.write("app/menu.html", menu); , Den første linjen leser i menyens ytre HTML, og jeg opprettet en malestreng som vi kan bruke for hver kobling. Etter det brukte jeg utvide funksjon, som aksepterer en ressursbane i forhold til mappen generatoren ble kalt inn (utgangsstien), og den returnerer en rekke av alle filene som samsvarer med det angitte mønsteret, i vårt tilfelle vil dette returnere hele delen HTML-filer.
Da sykler vi om listen over filer, og for hver enkelt bruker vi Underscore Strings for å fjerne tidsstempel og filtype, slik at vi blir igjen med bare navnet på filen. De menneskelig Metoden vil ta ting som er kamel-cased eller tegn som understreker og bindestreker og konvertere dem til mellomrom, slik at du får en menneskelig lesbar streng. Det vil også kapitalisere det første bokstaven i strengen som vil fungere bra for vår meny. Med navnet skilt, oppretter vi et kontekstobjekt sammen med IDen vi brukte før, slik at koblingene faktisk fører oss til de riktige seksjonene.
Nå har vi to nye funksjoner vi ikke har sett før, motor og føyer. motor tar en mal streng som den første parameteren og en kontekstavobjekt som den andre, og den vil kjøre den gjennom templerende motoren og returnerer resultatene. føyer aksepterer en HTML-streng som den første parameteren, en velger som den andre, og noe som skal settes inn som den tredje parameteren. Hva det vil gjøre er å sette inn det angitte innholdet på slutten av alle elementene som samsvarer med velgeren. Her legger vi linken til slutten av Meny div.
Sist, men ikke minst, har vi skrive metode som tar vår beregnede HTML-streng og skriver den ut til filen. Nå, for å fullføre opp her, la oss legge til en metode for å kjøre NPM:
runNpm: function () var done = this.async (); this.npmInstall ("", funksjon () console.log ("\ nEverything Setup !!! \ n"); ferdig ();); Den første parameteren for npmInstall er stiene, men du kan bare la dette være tomt, foruten at jeg bare skriver ut en melding på slutten, forteller brukeren at appen er klar.
Så som en rask tilbakemelding, når generatoren vår kjører, vil den spørre brukeren for prosjektnavnet og om det ikke skal inkluderes en demoseksjon. Etter det vil det fortsette å lage mappestrukturen og kopiere i alle filene som trengs for prosjektet vårt. Når det er gjort, vil det løpe NPM å installere avhengighetene vi definerte, og det vil vise meldingen vi nettopp har lagt inn.
Dette er stort sett alt hovedgeneratoren trenger å gjøre, men det er ikke så nyttig uten Grunt-oppgaver. For øyeblikket er det bare en haug med separate filer, men for å kunne utvikle seksjonene riktig, trenger vi en måte å forhåndsvise dem som en enkelt fil, og vi vil også trenge evnen til å bygge resultatene. Så åpen _gruntfile.js fra maler katalogen og la oss komme i gang:
module.exports = funksjon (grunt) grunt.initConfig (// task config); grunt.loadNpmTasks ( 'grov-contrib-connect'); grunt.loadNpmTasks ( 'grov-contrib-cssmin'); grunt.loadNpmTasks ( 'grov-contrib-concat'); grunt.registerTask ('tjener', ['connect']); grunt.registerTask ('build', ['concat', 'cssmin']); grunt.registerTask ('standard', ['build']); ; Så langt er dette bare standard kjeleplaten, vi trenger å eksportere en funksjon og inne i vi inkluderer de tre avhengighetene vi har lagt til package.json fil, og deretter registrerer vi oppgavene. Vi vil ha en tjene oppgave som vil fungere som en server og la oss se de separate filene sammen mens vi utvikler nettstedet vårt og så har vi bygge kommando som vil kombinere all HTML og CSS i vår app sammen for distribusjon. Jeg har også lagt til den siste linjen, så hvis du bare kjører grynte av seg selv, det vil anta at du vil bygge.
Nå, la oss starte med konfigurasjonen for bygge kommandoen som det er mye kortere:
concat: dist: src: ["app / header.html", "app / menu.html", "app / sections / *. html", "app / footer.html"], dest: "build / index .html ", cssmin: css: filer: " build / css / main.css ": [" app / css / *. css "]
For HTML, skal vi bare sammenkoble alle HTML-filene sammen i den rekkefølgen som er spesifisert i byggemappen under navnet index.html. Med CSS vil vi også redusere det, så vi bruker cssmin plugin og vi spesifiserer at vi vil sende ut en fil som heter main.css inne i bygge / css mappe og vi vil at den skal inkludere de beregnede versjoner av alle CSS-filene i vårt prosjekt.
Deretter må vi legge til konfigurasjonen for Connect-serveren, koble til gir mye flott mellomvare for å betjene statiske filer eller kataloger, men her må vi kombinere alle filene først, så vi må lage noen tilpassede håndtere. For å begynne med, la oss sette grunnkonfigurasjonen i:
Koble til: server: alternativer: keepalive: true, open: true, middleware: funksjon () // tilpassede handlere her,
De holde i live alternativet forteller Grunt å holde serveren kjører, den åpen alternativet vil fortelle Grunt å åpne nettadressen i nettleseren din automatisk når du starter serveren (det er mer en personlig preferanse skjønt) og den mellomvare funksjonen er ment å returnere en rekke mellomvarehåndteringsprogrammer for å behandle forespørslene.
I vår søknad er det i utgangspunktet to ressurser vi må håndtere, roten ressurs (vår "index.html"). I så fall må vi kombinere alle våre HTML-filer og returnere dem og deretter"main.css"Ressurs, i så fall vil vi gjerne returnere alle CSS-filene sammen. Som for noe annet, kan vi bare returnere en 404.
Så la oss starte med å lage en matrise for middleware og la oss legge til den første (dette går inn i mellomvare egenskapens funksjon, der jeg la kommentaren):
var middleware = []; middleware.push (funksjon (req, res, neste) hvis (req.url! == "/") returnerer neste (); res.setHeader ("Content-type", "text / html"); var html = grunt.file.read ("app / header.html"); html + = grunt.file.read ("app / menu.html"); varfiler = grunt.file.expand ("app / sections / *. html "); for (var i = 0; i < files.length; i++) html += grunt.file.read(files[i]); html += grunt.file.read("app/footer.html"); res.end(html); ); Vi har slags skiftet fra Yeoman's API til Grunt's, men heldigvis er kommandoenavnene nesten identiske, vi bruker fortsatt lese å lese filer og utvide for å få listen over filer. Dessuten er alt vi gjør ved å sette innholdstypen og returnere den sammenkædede versjonen av alle HTML-filene. Hvis du ikke er kjent med en mellomvarebasert server, vil den i utgangspunktet løpe gjennom middleware stacken til et sted langs linjen, en funksjon kan håndtere forespørselen.
I den første linjen, kontrollerer vi om forespørselen er for roten URL, hvis det er vi håndterer forespørselen, ellers vi ringer neste () som vil sende forespørselen nedover linjen til neste mellomvare.
Deretter må vi sende forespørselen til /css/main.css som, hvis du husker, er det vi satt opp i overskriften:
middleware.push (funksjon (req, res, neste) if (req.url! == "/css/main.css") returnerer neste (); res.setHeader ("Content-type", "text / css" ); var css = ""; varfiler = grunt.file.expand ("app / css / *. css"); for (var i = 0; i < files.length; i++) css += grunt.file.read(files[i]); res.end(css); ); I utgangspunktet er dette samme funksjon som før, med unntak av CSS-filene. Sist, men ikke minst, vil jeg legge til en 404 melding og returnere middleware stacken:
middleware.push (funksjon (req, res) res.statusCode = 404; res.end ("Ikke funnet");); returnere mellomvare; Dette betyr at hvis noen forespørsler ikke blir håndtert av de to foregående funksjonene, sender vi denne 404 meldingen. Og det er alt der er til det, vi har generatoren som vil skape prosjektet og Grunt-oppgaver som vil tillate oss å forhåndsvise og bygge vår app. Det siste emnet jeg vil dekke kort, er undergeneratorer.
Vi har allerede opprettet hovedgeneratoren som bygger ut applikasjonen vår, men Yeoman lar deg lage så mange undergeneratorer som du vil bruke etter de første stillasene. I vår søknad trenger vi en til å generere nye seksjoner. For å komme i gang kan vi faktisk bruke en subgenerator fra generator: generator å stille opp filen, for å gjøre dette, bare kjør følgende kommando fra innsiden vår en side mappe:
yo generator: undergenerator seksjon
Dette vil opprette en ny mappe som heter seksjon med en index.js fil og a maler mappe akkurat som vår viktigste (app) generator. La oss tømme ut generatoren som vi gjorde sist, og du bør være igjen med følgende:
'bruk streng'; var util = krever ('util'); var yeoman = krever ('yeoman-generator'); var SectionGenerator = yeoman.generators.NamedBase.extend (); module.exports = SectionGenerator; Du kan også legge merke til at vi strekker seg fra NamedBase ikke den vanlige Utgangspunkt, Det betyr at du må levere en navngiv parameter når du ringer generatoren, og du kan da få tilgang til det aktuelle navnet this.name. Nå er denne koden i hovedsak de to funksjonene vi allerede skrev i forrige generator: generateDemoSection og generateMenu, så vi kan bare kopiere disse to funksjonene her. Jeg vil erstatte navnet på den første til noe mer hensiktsmessig:
generateSection: function () var context = innhold: this.name, id: this ._. classify (this.name) var fileBase = Date.now () + "_" + dette ._. understreket (dette. Navn); var htmlFile = "app / sections /" + fileBase + ".html"; var cssFile = "app / css /" + fileBase + ".css"; this.template ("_ section.html", htmlFile, kontekst); this.template ("_ section.css", cssFile, kontekst); , generateMenu: function () var menu = this.read ("_ menu.html"); var t = '<%= name %>'; var files = this.expand ("app / sections / *. html"); for (var i = 0; i < files.length; i++) var name = this._.chain(files[i]).strRight("_").strLeftBack(".html").humanize().value(); var context = name: name, id: this._.classify(name) ; var link = this.engine(t, context); menu = this.append(menu, "div.menu", link); this.write("app/menu.html", menu); Den eneste forskjellen er i stedet for å skrive inn navnet direkte, jeg bruker this.name eiendom. Den eneste andre tingen er at vi må flytte malfiler _sections.html, _section.css og _menu.html fra app / maler til seksjon / maler som det er der mal/lese kommandoene vil se ut.
Problemet er nå koden duplisering. Så tilbake i app / index.js fil, i stedet for at den har samme kode som undergeneratoren, kan vi bare ringe undergeneratoren og sende den navnet argumentet. Du kan fjerne generateMenu fra app / index.js helt og fullt, og vi vil endre generateDemoSection til følgende:
generateDemoSection: function () if (this.addDemoSection) var gjort = this.async (); this.invoke ("onepage: section", args: ["Demo Section"], funksjon () ferdig ();); annet this.write ("app / menu.html", ""); , Så hvis brukeren ønsket å lage demo-delen, så vi påberope subgeneratoren passerer i det første argumentet som er navnet. Hvis brukeren ikke vil ha demo-innlegget, trenger vi fortsatt å lage noe for menyen, fordi våre Grunt-oppgaver vil prøve å lese det, så i den siste delen skriver vi bare en tom streng til menyfilen.
Vår generator er endelig ferdig, og vi kan nå teste den ut.
Det første vi må gjøre er å installere generatoren på systemet ditt. I stedet for å installere perlen regelmessig, kan vi bruke link kommandoen for å bare koble mappen til perlen banen, slik at vi kan fortsette å gjøre endringer her uten å måtte installere det hver gang. Fra prosjektkatalogen kan du bare kjøre nom link.
Det siste trinnet er å faktisk kjøre generatoren. Bare opprett en ny mappe og inne i runde du er opptatt Dette vil kjøre vår hovedgenerator og installere avhengighetene via NPM. Vi kan deretter bruke våre Grunt-oppgaver for å vise siden (grunt servere) eller legg til noen flere seksjoner med vår generator ved hjelp av noe som yo onpage: seksjonen "En annen seksjon" og de nye filene blir lagt til.
I denne artikkelen har vi dekket mange av de vanlige funksjonene, men det er fortsatt flere interessante alternativer for å sjekke ut. Som du sannsynligvis kan fortelle, det er litt kokerplatt nødvendig når du bygger en generator, men det er litt av poenget, du får alt gjort en gang, og du kan bruke den gjennom alle dine applikasjoner.
Jeg håper du likte å lese denne artikkelen, hvis du har noen spørsmål eller kommentarer, vær så snill å la dem gå under.
