Share
Wanneer u nieuw bent in de front-end ontwikkeling en HTML5, CSS en JavaScript onder de knie wilt krijgen, is de voor de hand liggende volgende stap om uw handen op te steken hulpmiddelendat de meeste ontwikkelaars gebruiken om gezond te blijven in deze complexe ruimte. Ook jij verdient het om meer flexibiliteit en functies te hebben tijdens het schrijven van je CSS-sheets door Less te gebruiken. U verdient het ook om de bandbreedte te optimaliseren door uw JS-code te verkleinen. U verdient het ook om automatisch te kunnen controleren of uw JS-code goed is met JSHint.
Je verdient al dit goede spul.
U begint dus al deze geweldige gereedschappen handmatig te gebruiken en voert steeds meer opdrachtregels handmatig uit. Soms vergeet je de Less-compiler uit te voeren ... Soms vergeet je JSHint uit te voeren en wordt er een bug verzonden ...
En plotseling vraag je je af: is er een oplossing om al deze tools te automatiseren? Hoe kunt u een herhaalbare workflow maken om te voorkomen dat u fouten maakt??
Uiteraard bestaat er een oplossing, en twee gereedschappen in het bijzonder wachten op u om aan de slag te gaan: knorren en Slok.
Als een beginneling met deze tools vraag je je af hoe ze werken en welke je moet gebruiken, of niet soms? Welnu, perfect dan, u leest het juiste artikel!
Ik zal je de basis geven voor het gebruik van Grunt en Gulp met behulp van een heel eenvoudig voorbeeld dat je kunt downloaden van GitHub.
Het is een eenvoudige website die bestaat uit drie bestanden:
Styles.less definieert het CSS-blad op een rijkere manier dan mogelijk is met behulp van een standaard CSS-bestand. Uiteindelijk gebruiken we de Less-compiler om een styles.css het dossier. Met Less kunnen we bijvoorbeeld variabelen in het CSS-bestand gebruiken:
Lees meer over Less in deze Getting Started-handleiding.
De JavaScript- en HTML-code zijn heel eenvoudig. De pagina zou er als volgt uit moeten zien:
U moet eerst begrijpen hoe Node.js Package Manager (npm) werkt.
Npm is de tool die wordt geleverd bij Node.JS. Het wordt gebruikt om tools en frameworks te krijgen terwijl het automatisch hun afhankelijkheden oplost.
Om bijvoorbeeld Less te gebruiken en te compileren in een web-bruikbaar CSS-bestand, moet je eerst Less installeren met deze opdracht:
npm install -g minder
Opmerking: om de opdrachtregel npm te krijgen, moet u Node.js vanaf de knooppuntwebsite installeren.
Zodra dit is gebeurd, kunt u deze opdracht uitvoeren om .less-bestanden te compileren naar .css:
lessc styles.less> styles.css
Npm gebruikt een bestand dat het maakt en opslaat in de lokale map waarin het werkt: package.json. Dit bestand gebruikt de JavaScript Object Notation (JSON) -indeling om npm te laten weten welk gereedschap en welke versie is geïnstalleerd en welke kaders worden gebruikt door de huidige project (die wordt vertegenwoordigd door de huidige map).
Dit bestand is belangrijk voor Grunt en Gulp omdat het de lijst bevat met plug-ins die zijn gedownload en bruikbaar zijn in uw automatiseringsworkflow.
Als u een leeg pakket.json-bestand wilt maken, kunt u de volgende opdracht npm gebruiken:
npm init
U zult enkele vragen doornemen die u kunt beantwoorden met de standaardoptie, en dan bent u helemaal klaar om te starten.
In dit bestand heb je twee soorten afhankelijkheden:
Npm biedt u in feite drie manieren om pakketten te installeren:
Accentsconagua
-g of -globaal keuze--save-dev keuzeDe derde maakt een devDependencies sectie / eigenschap in het bestand package.json.
Grunt is een pionier op het gebied van de werkstroom voor JavaScript-automatisering. Er zijn veel bekende Grunt-gebruikers zoals Twitter, jQuery en Modernizr.
Het basisprincipe voor Grunt is om ons een gemakkelijke manier te geven om te rennen taken. Een taak is een set codebestanden en configuratiebestanden die al voor u zijn gemaakt. Je kunt nieuwe taken krijgen door Grunt-plug-ins te installeren die je zult krijgen met behulp van npm. Je kunt een plug-in vinden voor vrijwel elke tool die je zou kunnen gebruiken, zoals Less en JSHint.
Als u Grunt wilt uitvoeren, moet u een Grunt-bestand maken waarin u opgeeft welke taken u wilt uitvoeren en de configuratie voor elk van hen. Zodra dit is gebeurd, hoeft u alleen de knorren opdrachtregel die de taak aangeeft die u wilt uitvoeren (standaard of een specifieke) en deze doet het automatisch.
Laten we nu een stap-voor-stap handleiding doorlopen om dit allemaal in te stellen.
Gebruik npm om het bestand te starten:
npm init
Je zult een paar vragen moeten beantwoorden, zoals de naam van het project en wat het standaard .js-bestand is. U kunt er ook voor kiezen om het bestand handmatig aan te maken en de inhoud ervan in te stellen op:
"naam": "projectnaam", "devDependencies": , "afhankelijkheden":
U moet Grunt wereldwijd installeren om de opdrachtregel te krijgen en lokaal om alles wat nodig is voor het project te initialiseren.
Rennen:
npm install -g grunt
Voer het lokaal uit:
npm install grunt --save-dev
Opmerking: vergeet het -dev deel om te worden gespecificeerd als een van de devDependencies in de package.json het dossier.
Grunt werkt met een bestand genaamd gruntFile.js. Dit bestand bevat alles wat nodig is voor Grunt, dat wil zeggen:
Grunt verwacht dat het bestand een enkele functie uitvoert die één parameter met de naam "grunt" nodig heeft. U gebruikt dit object om alle Grunt-relatieve acties uit te voeren.
Hier is een minimaal gruntbestand dat alleen het bestand package.json leest en een bestand maakt standaard taak die niets uitvoert.
Opmerking: plaats het bestand in de projectmap, zij aan zij met het bestand package.json.
module.exports = functie (grunt) // Projectconfiguratie. grunt.initConfig (pkg: grunt.file.readJSON ('package.json'),); // Standaardtaak (en). grunt.registerTask ('standaard', []); ; U kunt het uitvoeren om er zeker van te zijn dat alles correct is geconfigureerd.
Om dat te doen, opent u een opdrachtprompt in de projectmap en voert u:
knorren
Je zou zoiets als dit moeten zien:
Nu je Gruntbestand klaar is, is de volgende stap om een plug-in toe te voegen en te gebruiken. Alle plug-ins zijn te vinden in de lijst op de Grunt-website. Een van de gebruikelijke taken die in een Grunt-bestand worden uitgevoerd, is controleren of de JavaScript-syntaxis correct is. Om dat te doen, gebruiken we meestal JSHint.
Laten we dit toevoegen aan je gromwerkworkflow.
Als je zoekt naar JSHint op de grunt-plug-ins, zul je grunt-contrib-jshint vinden, wat overeenkomt met wat we nodig hebben!
Voer in de projectmap:
npm install grunt-contrib-jshint --save-dev
Als dit klaar is, moet je het toevoegen aan je Gruntfile.js. Daar zijn twee eenvoudige stappen voor:
Om de plug-in te laden, gebruikt u de loadNpmTasks functie:
// Laad de plug-in die de "jshint" -taak biedt grunt.loadNpmTasks ('grunt-contrib-jshint');De configuratie is gedaan in de initConfigfunctie waarbij u een nieuwe eigenschap aan het object in de parameter moet toevoegen. Dit moet de naam zijn van de taak die u wilt toevoegen en heeft betrekking op de plug-in die u gebruikt. De beste manier om die naam en de lijst met beschikbare opties voor de taak te kennen, is door de documentatie bij de plug-in te bekijken. Je zult altijd een goed gedocumenteerd voorbeeld vinden.
In onze voorbeeld willen we bijvoorbeeld alle JavaScript-bestanden controleren, behalve gruntfile.js. We willen ook een reeks regels activeren om de JavaScript-bestanden zoals in te checken eqeqeq om ervoor te zorgen dat we triple-equals gebruiken wanneer dat nodig is.
Hier is de initConfig functie gewijzigd:
U kunt uw taak uitvoeren met behulp van de volgende opdrachtregel (waarbij u de taaknaam als een parameter opgeeft voor knorren):
grom jshint
Het resultaat is hier:
Je hoeft alleen dat commando uit te voeren en het zal je automatisch vragen om eventuele fouten die het tegenkomt.
Gefeliciteerd, je hebt nu een geautomatiseerde taak in je gromwerkworkflow!
Uw JSHint-taak werkt goed, maar het is een beetje alleen in de workflow. Meestal gebruiken we tools zoals Grunt om meer dan één taak uit te voeren.
Het is heel gemakkelijk om er meer toe te voegen, omdat je gewoon dezelfde stappen moet volgen. Stel dat u nu de compilatie voor uw minder bestand in het geautomatiseerde proces wilt toevoegen. Als je zoekt in de Grunt-plug-ins, vind je een grunt-contrib-less plugin die u in uw projectmap kunt installeren:
npm install grunt-contrib-less --save-dev
Net als bij de JSHint-taak moet u de configuratie toevoegen:
Laad vervolgens de taak:
U kunt nu Grunt uitvoeren en het minder taak: hierdoor wordt alleen Less gestart. Dat is OK, maar je wilt alle taken uitvoeren, toch? Dat is de rol van de standaardtaak.
Wanneer je net loopt knorren zonder een taak op te geven, zal het zoeken naar een standaard taak uitvoeren en alle taken uitvoeren die in de array zijn opgegeven. U kunt het aanpassen om te worden uitgevoerd minder en jshint. Merk op dat om een groep taken zoals toe te voegen standaard, je moet de registerTaskfunctie:
Vanaf nu, wanneer je rent knorren, het zal rennen jshint, en dan minder:
U kunt elke gewenste taak toevoegen en u kunt ook een andere taakgroep opgeven standaard en noem ze door hun naam door te geven als argument voor de knorren opdrachtregel.
Makkelijk, toch?
Nu ben je een gelukkige ontwikkelaar. Al uw repetitieve taken worden geautomatiseerd in een grunt-workflow en u hoeft alleen maar te grommen om ze uit te voeren. Maar het kan nog gemakkelijker worden gedaan. Het kan automatisch worden gedaan.
Om dat te doen, kunt u een specifieke taak met de naam toevoegen kijk maar. Deze taak inspecteert voortdurend uw werkmap en, op basis van regels, wanneer een bestand wordt gewijzigd, voert grunt een bijbehorende taak uit.
Installeer eerst kijk maar in je projectmap:
npm install grunt-contrib-watch --save-dev
Laad het zoals alle andere taken met behulp van de loadNpmTasks functie, en configureer het. Het configuratie gedeelte is hier een beetje anders omdat je een configuratie moet specificeren voor elke taak die je wilt bedekken kijk maar.
Voor meer informatie, kunt u de volledige documentatie voor deze taak lezen.
Als je wilt activeren kijk maar, je hoeft alleen de volgende opdracht uit te voeren:
gegrom horloge
En het zal taken uitvoeren elke keer dat een bestand wordt gewijzigd en dit bestand is in het bereik van bewaakte bestanden voor de specifieke taak.
En dat is het! U weet nu alles om een geautomatiseerde workflow te creëren met grunt.
Gulp is een alternatief voor gegrom. Het is iets recenter en heeft de reputatie flexibeler te zijn dan te grommen. Voordat we kiezen welke je gaat gebruiken, laten we eens kijken hoe gulp werkt.
Gulp is een tool voor het automatiseren van workflows. Net als grunt werkt het met behulp van npm en het bestand package.json. Alle beschikbare plug-ins worden ook gedownload met behulp van npm en toegevoegd als devDependencies in het bestand package.json.
Een van de belangrijkste verschillen is dat Gulp streams gebruikt. Een stream is een set functies waarmee een bestand kan worden gewijzigd in het geheugen. Het bestand wordt pas aan het einde van het proces op de schijf geschreven, dus het is efficiënter. Grunt-taken, aan de andere kant, werken als silo's en kunnen niet worden geketend.
Laten we even kijken hoe Gulp werkt door een paar eenvoudige stappen te volgen.
Net als bij Grunt, moet je eerst het bestand package.json maken. Je kunt exact dezelfde techniek gebruiken als je voor het gruntmonster hebt gebruikt.
Nadat het package.json-bestand is gemaakt, installeer je slik globaal en lokaal met behulp van:
npm install -g gulp
en
npm install gulp --save-dev
Hiermee wordt de gulp-opdrachtregel geïnstalleerd en alles wat nodig is om een gulp-workflow uit te voeren.
U moet dan gulp-utils installeren, die gemeenschappelijke functies bevatten die door andere plug-ins worden gedeeld:
npm install gulp-util --save-dev
Maak ten slotte het minimum slikbestand aan dat er als volgt uitziet:
Zoals u kunt zien, is het een beetje anders dan de gruntsyntaxis. In slikken worden plug-ins geladen met behulp van de vereisen syntaxis zoals u gewend bent als u een Node.js-ontwikkelaar bent. Er is ook een standaard taak gedefinieerd met behulp van de gulp.task functie.
Als u de slokopdrachtregel met een opdrachtprompt in de projectmap, zou u een resultaat als dit moeten zien:
Om een plugin in slik te gebruiken, gebruikt u dezelfde functie als degene die we hebben gebruikt om het te maken standaard taak. Dit komt omdat u geen specifieke naam hoeft te gebruiken om een taak te maken. Je belt gewoon gulp.task, stel de gewenste naam in en geef deze een JavaScript-functie als een tweede parameter. Wanneer gulp de taak uitvoert, wordt deze functie uitgevoerd.
Als u een plug-in wilt gebruiken, roept u deze met de naam die u hebt gekozen wanneer u deze nodig hebt. Meestal noem je dit onderdeel van een streamingworkflow die meestal begint met een selectie van bestanden. Dit wordt gedaan met de gulp.src functie. Het zal een aantal bestanden selecteren en een stream retourneren die kan worden gebruikt door een andere functie met pijp. Dat is hoe je meerdere acties kunt ketenen zonder ze naar de schijf te schrijven. Je geeft de stream gewoon door van de ene plug-in naar de andere.
Hier is een standaardvoorbeeld voor Less:
Wij eerst vereisen ('gulp-less') om de te laden minder plugin voor gulp. (We hebben het gebruikt npm installeer gulp-less --save-dev).
Dan gulp.src selecteert alle .minder bestanden, we 'pipen' het naar de minder()functie en het is eindelijk 'doorgesluisd' naar gulp.destdie aangeeft waar het resultaat moet worden weggeschreven. Omdat gulp.src meer dan één bestand kan selecteren, geeft gulp.dest een map op.
Zodra je het piping-model begrijpt, kun je gemakkelijk hetzelfde resultaat krijgen als het resultaat dat we met gegrom hebben gekregen.
De kracht van slikken is dat u aangepaste taken kunt maken waarin u meer dan één plug-in belt en waar u ze kunt associëren zoals u dat wilt.
Let op: er is uiteraard ook een slok-horloge plugin die u kunt gebruiken om de start van uw workflow te automatiseren!
Ik hoop dat je nu een beter begrip hebt van waarom je een automatiseringsworkflow nodig hebt en hoe je Grunt of Gulp kunt gebruiken om het te krijgen.
Het kiezen van een van hen is meer gerelateerd aan de taak die u wilt bereiken.
Grunt is gemakkelijk te gebruiken. U hoeft het leidingsysteem niet te begrijpen en het uitvoeren van eenvoudige taken zal eenvoudiger zijn. Het is een echt volwassen hulpmiddel, gebruikt door veel bekende editors en ontwikkelaars, en er zijn veel plug-ins beschikbaar.
Dat gezegd hebbende, de manier waarop Gulp is ontworpen, kan u veel flexibiliteit bieden. Het bestaat al geruime tijd en zelfs als je niet zoveel plug-ins zult vinden als voor Grunt, zijn alle klassieke plug-ins beschikbaar voor Gulp.
Als u een echt standaardworkflow gebruikt met gemeenschappelijke stappen zoals JSHint, uglifying, CSS-validering, enz., Is Grunt een goede keuze. Als je ingewikkelder bent, zal Gulp een goede wingman zijn.
Microsoft heeft veel gratis leren over veel open source JavaScript-onderwerpen en we zijn op een missie om nog veel meer met Microsoft Edge te maken. Hier zijn enkele om te bekijken:
En enkele gratis tools om aan de slag te gaan: Visual Studio Code, Azure Trial en testtools voor meerdere browsers, allemaal beschikbaar voor Mac, Linux of Windows.
Dit artikel maakt deel uit van de web dev tech-serie van Microsoft. We zijn verheugd om te delen Microsoft Edge en het nieuwe EdgeHTML-renderingengine met jou. Download gratis virtuele machines of test op afstand op uw Mac, iOS, Android of Windows-apparaat @ http://dev.modern.ie/.
