Share
Når du er ny på utviklingen av fronten og begynner å mestre HTML5, CSS og JavaScript, er det åpenbare neste skritt å legge hendene på verktøyat de fleste utviklere bruker til å være sane i dette komplekse rommet. Du fortjener også å ha mer fleksibilitet og funksjoner mens du skriver CSS-arkene dine ved å bruke Less. Du fortjener også å optimalisere båndbredden ved å redusere JS-koden din. Du fortjener også å kunne automatisk kontrollere at JS-koden din er god ved hjelp av JSHint.
Du fortjener alt dette gode ting.
Så du begynner å bruke alle disse gode verktøyene for hånd, kjører flere og flere kommandolinjer manuelt. Noen ganger glemmer du å kjøre Mindre kompilatoren ... Noen ganger glemmer du å kjøre JSHint og en feil blir sendt ...
Og plutselig finner du deg selv lurer på: Er det noen løsning å automatisere alle disse verktøyene? Hvordan kan du opprette en repeterbar arbeidsflyt for å hindre deg i å gjøre feil?
Tydeligvis eksisterer en løsning, og to verktøy venter spesielt på at du skal komme i gang: Grynte og Gulp.
Som nybegynner ved hjelp av disse verktøyene, lurer du på hvordan de fungerer og hvilken du skal bruke, ikke sant? Vel, perfekt da, leser du den riktige artikkelen!
Jeg vil gi deg grunnlaget for å bruke Grunt and Gulp ved å bruke et veldig enkelt eksempel som du kan laste ned fra GitHub.
Det er et enkelt nettsted bestående av tre filer:
Styles.less definerer CSS-arket på en rikere måte enn det er mulig å bruke en standard CSS-fil. Til slutt bruker vi Mindre kompilatoren til å lage en styles.css fil. Ved å bruke Less, kan vi for eksempel bruke variabler i CSS-filen:
Få mer informasjon om Less i denne Komme i gang-veiledningen.
JavaScript og HTML-koden er veldig enkle. Siden skal se slik ut:
Du må først forstå hvordan Node.js Package Manager (npm) fungerer.
Npm er verktøyet som leveres med Node.JS. Det er vant til å få verktøy og rammer mens de automatisk løser sine avhengigheter.
For eksempel, for å bruke Mindre og kompilere den i en nettbrukbar CSS-fil, må du først installere Mindre ved å bruke denne kommandoen:
npm installere -g mindre
Merk: For å få kommandolinjen npm må du installere Node.js fra Node-nettsiden.
Når dette er gjort, kan du kjøre denne kommandoen for å kompilere .frie filer inn i .css:
lessc styles.less> styles.css
Npm bruker en fil som den oppretter og lagrer i den lokale mappen den jobber i: package.json. Denne filen bruker JavaScript Object Notation (JSON) formatet for å la npm vite hvilket verktøy og versjon som er installert og rammene som brukes av gjeldende prosjekt (som er representert av gjeldende mappe).
Denne filen er viktig for Grunt and Gulp fordi den inneholder listen over plugins som er lastet ned og kan brukes i din automatiserings arbeidsflyt.
For å opprette en tom package.json-fil kan du bruke følgende npm-kommando:
npm init
Du vil gjennomgå noen spørsmål som du kan svare på ved hjelp av standardalternativet, og du vil da være klar til å starte.
I denne filen har du to typer avhengigheter:
Npm gir deg i utgangspunktet tre måter å installere pakker på:
Accentsconagua
-g eller -global alternativ--save-dev alternativDen tredje vil skape en devDependencies delen / egenskapen inne i package.json-filen.
Grunt er en pioner i JavaScript-automatiserings arbeidsflytområdet. Det er mange kjente Grunt-brukere som Twitter, jQuery og Modernizr.
Grunnprinsippet for Grunt er å gi oss en enkel måte å løpe på oppgaver. En oppgave er et sett med kodefiler og konfigurasjonsfiler som allerede er opprettet for deg. Du kan få nye oppgaver ved å installere Grunt plugins som du vil få ved hjelp av npm. Du kan finne et plugin for stort sett alle verktøy du kan bruke, for eksempel Less and JSHint.
For å kjøre Grunt må du opprette en Gruntfile der du angir hvilke oppgaver du vil kjøre og konfigurasjonen for hver av dem. Når dette er gjort, må du bare kjøre grynte kommandolinje angir oppgaven du vil kjøre (standard eller en bestemt), og den vil gjøre det automatisk.
La oss nå gå gjennom en steg-for-steg guide for å sette alt dette opp.
Bruk npm til å initiere filen:
npm init
Du må svare på noen få spørsmål som prosjektnavnet og hva er standard .js-filen. Du kan også velge å opprette filen manuelt og sette innholdet til:
"navn": "prosjektnavn", "devDependencies": , "avhengigheter":
Du må installere Grunt globalt for å få kommandolinjen og lokalt for å initialisere alt som trengs for prosjektet.
Løpe:
npm installere -g grunt
Kjør det lokalt:
npm installere grunt - save-dev
Merk: Ikke glem det -dev del for det å bli spesifisert som en av devDependencies i package.json fil.
Grunt jobber med en fil som heter gruntFile.js. Denne filen inneholder alt som trengs av Grunt, det vil si:
Grunt forventer at filen skal eksportere en enkelt funksjon som tar en parameter som heter "grunt". Du vil bruke dette objektet til å utføre alle Grunt-relativ handlinger.
Her er en minimal gruntfile som bare leser filen package.json og lager en misligholde Oppgave som kjører ingenting.
Merk: Legg filen i prosjektmappen, side ved side med package.json-filen.
module.exports = funksjon (grunt) // Prosjektkonfigurasjon. grunt.initConfig (pkg: grunt.file.readJSON ('package.json'); // Standard oppgave (r). grunt.registerTask ('standard', []); ; Du kan utføre det for å være sikker på at alt er konfigurert riktig.
For å gjøre det, åpne en kommandoprompt i prosjektmappen og kjør:
grynte
Du bør se noe slikt:
Nå som Gruntfile er klar, er neste trinn å legge til et plugin og bruke det. Alle plugins finner du i noteringen på Grunt nettside. En av de vanlige oppgaver som utføres i en Gruntfile, kontrollerer om JavaScript-syntaksen er riktig. For å gjøre det bruker vi vanligvis JSHint.
La oss legge til dette i grunt arbeidsflyt.
Hvis du søker etter JSHint på grunt plugins siden, finner du grunt-contrib-jshint, som tilsvarer det vi trenger!
I prosjektmappen, kjør:
npm installere grunt-contrib-jshint - save-dev
En dette er gjort, du må legge det til i Gruntfile.js. Det er to enkle trinn for det:
For å laste pluginet, bruk loadNpmTasks funksjon:
// Last inn pluginet som gir "jshint" oppgaven grunt.loadNpmTasks ('grunt-contrib-jshint');Konfigurasjonen er ferdig i initConfigfunksjon hvor du må legge til en ny egenskap i objektet som er oppgitt i parameteren. Dette må være navnet på oppgaven du vil legge til og er relatert til plugin du bruker. Den beste måten å vite navnet på og listen over tilgjengelige alternativer for oppgaven er å se på plugin-dokumentasjonen. Du vil alltid finne en veldokumentert prøve.
For eksempel, i vår prøve vil vi sjekke alle JavaScript-filer unntatt gruntfile.js. Vi ønsker også å aktivere et sett med regler for å sjekke inn JavaScript-filene som eqeqeq for å sikre at vi bruker trippel likt når det trengs.
Her er initConfig funksjon modifisert:
Du kan kjøre oppgaven ved å bruke følgende kommandolinje (der du oppgir oppgavenavnet som en parameter for grynte):
grunt jshint
Resultatet er her:
Du må bare kjøre den kommandoen, og den vil automatisk spørre deg om eventuelle feil det møter.
Gratulerer, du har nå en oppgave automatisert i din grunne arbeidsflyt!
Din JSHint-oppgave fungerer bra, men det er litt alene i arbeidsflyten. Vanligvis bruker vi verktøy som Grunt til å kjøre mer enn én oppgave.
Det er veldig enkelt å legge til flere av dem, siden du bare må følge de samme trinnene. La oss si at du nå vil legge til kompilasjonen for din mindre fil i den automatiserte prosessen. Hvis du søker i Grunt-pluginene, finner du en grunt-contrib-mindre plugin som du kan installere i prosjektmappen din:
npm installere grunt-contrib-less - save-dev
Som med JSHint-oppgaven må du legge til konfigurasjonen:
Last deretter opp oppgaven:
Du kan nå kjøre Grunt og angi mindre Oppgave: Dette vil bare starte Mindre. Det er ok, men du vil kjøre alle oppgavene, ikke sant? Det er rollen til misligholdeoppgave.
Når du bare kjører grynte uten å spesifisere noen oppgave, vil den søke etter en misligholde oppgave og kjør alle oppgavene som er angitt i sin rekkefølge. Du kan endre den til å kjøre mindre og jshint. Legg merke til at du vil legge til en gruppe oppgaver som misligholde, du må ringe registerTaskfunksjon:
Fra nå, når du kjører grynte, det vil løpe jshint, og så mindre:
Du kan legge til en hvilken som helst oppgave du vil, og du kan også angi en annen gruppe oppgaver som misligholde og ring dem ved å sende navnet sitt som et argument til grynte kommandolinje.
Lett, rett?
Nå er du en glad utvikler. Alle dine repeterende oppgaver blir automatisert i et grunt arbeidsflyt, og du må bare løpe grunt for at de skal kunne utføre. Men det kan gjøres enda enklere. Det kan gjøres automatisk.
For å gjøre det kan du legge til en bestemt oppgave som heter se. Denne oppgaven vil kontinuerlig inspisere arbeidsmappen din og, basert på regler, når en fil er endret, vil grunt utføre en tilknyttet oppgave.
Først installer se i prosjektmappen din:
npm installere grunt-contrib-watch - save-dev
Legg det som alle andre oppgaver ved hjelp av loadNpmTasks funksjonen, og konfigurer den. Konfigureringsdelen er litt annerledes her, fordi du må spesifisere en konfigurasjon for hver oppgave du vil dekke ved hjelp av se.
For mer informasjon, kan du lese full dokumentasjon for denne oppgaven.
Når du vil aktivere se, du må bare kjøre følgende kommando:
grunt ur
Og det vil utføre oppgaver hver gang en fil endres, og denne filen er i omfanget av overvåkede filer for den spesifikke oppgaven.
Og det er det! Du vet nå alt for å lage automatisert arbeidsflyt ved hjelp av grunt.
Gulp er et alternativ til grunt. Det er litt nyere og har et rykte som å være mer fleksibelt enn grunt. Før du velger hvilken du vil bruke, la oss se på hvordan gulp fungerer.
Gulp er et arbeidsflytautomatiseringsverktøy. Som grunt fungerer det med npm og package.json-filen. Alle tilgjengelige plugins vil også bli lastet ned ved hjelp av npm og lagt til som devDependencies i package.json-filen.
En av de viktigste forskjellene er at Gulp bruker strømmer. En strøm er et sett med funksjoner som en fil vil gå og bli endret i minne. Filen vil bli skrevet på disken bare på slutten av prosessen, så det er mer effektivt. Grunt oppgaver, derimot, fungerer som siloer og kan ikke kjedes.
La oss få en rask titt på hvordan Gulp fungerer ved å følge noen få enkle trinn.
I likhet med Grunt må du først opprette pakken.json-filen. Du kan bruke nøyaktig den samme teknikken som du brukte for gruntprøven.
Når pakket.json-filen er opprettet, installer du gulp globalt og lokalt ved å bruke:
npm install-g gulp
og
npm installer gulp - save-dev
Dette vil installere kommandolinjen Gulp og alt som trengs for å kjøre en gulp-arbeidsflyt.
Du må da installere gulp utils, som inneholder vanlige funksjoner delt av andre plugins:
npm installer gulp-util - save-dev
Endelig opprett den minste gulp-filen, som vil se slik ut:
Som du kan se, er det litt annerledes enn grunt syntaks. I gulp er plugins lastet ved hjelp av krever syntaks som du kanskje er vant til hvis du er en Node.js-utvikler. Det er også en misligholde oppgaven definert ved hjelp av gulp.task funksjon.
Hvis du kjører gulpkommandolinje ved hjelp av en kommandoprompt i prosjektmappen, bør du se et slikt resultat:
For å bruke et plugin i gulp, bruker du samme funksjon som den vi pleide å lage misligholde oppgave. Dette skyldes at du ikke trenger å bruke et bestemt navn for å opprette en oppgave. Du ringer bare gulp.task, sett inn navnet du vil ha, og gi det en JavaScript-funksjon som en andre parameter. Når gulp kjører oppgaven, vil den kjøre denne funksjonen.
Hvis du vil bruke et plugin, ringer du det ved hjelp av navnet du valgte når du krever det. Vanligvis kaller du det som en del av en streaming arbeidsflyt som vanligvis starter med et utvalg av filer. Dette gjøres med gulp.src funksjon. Det vil velge en haug med filer og returnere en strøm som kan brukes av en annen funksjon ved hjelp av rør. Slik kan du kjede flere handlinger uten å skrive dem til disken. Du sender bare strømmen fra en plugin til en annen.
Her er en grunnleggende prøve for Mindre:
Vi først krever ("gulp-less") å laste inn mindre plugin for gulp. (Vi fikk det med å bruke npm installer gulp-less - save-dev).
Deretter gulp.src vil velge alle .mindre filer, vi "pipe" den til mindre()funksjon og det er endelig "piped" til gulp.destsom indikerer hvor du skal skrive resultatet. Som gulp.src kan du velge mer enn én fil, spesifiserer gulp.dest en mappe.
Når du forstår rørmodellen, kan du enkelt få det samme resultatet som det vi brukte med grunt.
Kraften er å lage skreddersydde oppgaver der du ringer mer enn ett plugin, og hvor du kan knytte dem slik du vil.
Merk: det er åpenbart også a jafs-klokke plugin du kan bruke til å automatisere lanseringen av arbeidsflyten din!
Jeg håper at du nå har en klarere forståelse av hvorfor du trenger en automatiserings arbeidsflyt og hvordan du kan bruke Grunt eller Gulp for å få det.
Å velge en av dem er mer knyttet til oppgaven du vil oppnå.
Grunt er lett å bruke. Du trenger ikke å forstå rørsystemet, og å oppnå enkle oppgaver blir enklere. Det er et veldig modent verktøy, brukt av mange kjente redaktører og utviklere, og det er mange plugins tilgjengelig.
Når det er sagt, måten Gulp er designet kan gi deg stor fleksibilitet. Det har eksistert en stund, og selv om du ikke finner så mange plugins som du vil for Grunt, er alle de klassiske som er tilgjengelige for Gulp.
Hvis du bruker en virkelig standard arbeidsflyt med vanlige trinn som JSHint, uglifying, CSS validering, etc., er Grunt et godt valg. Hvis du er opp til mer kompliserte oppgaver, vil Gulp være en god wingman.
Microsoft har en mengde gratis læring på mange open source JavaScript-emner, og vi har et oppdrag å skape mye mer med Microsoft Edge. Her er noen å sjekke ut:
Og noen gratis verktøy for å komme i gang: Visual Studio Code, Azure Trial og testverktøy for kryss-leser-alt tilgjengelig for Mac, Linux eller Windows.
Denne artikkelen er en del av web dev-teknologiserien fra Microsoft. Vi er glade for å dele Microsoft Edge og den nye EdgeHTML rendering motor med deg. Få gratis virtuelle maskiner eller test eksternt på Mac, IOS, Android eller Windows-enheten @ http://dev.modern.ie/.
