Share
När du är ny för utveckling i framkant och börjar mastera HTML5, CSS och JavaScript, är det uppenbara nästa steg att lägga händerna på verktygatt de flesta utvecklare använder sig för att hålla sig i detta komplexa utrymme. Du förtjänar också att ha mer flexibilitet och funktioner när du skriver dina CSS-ark genom att använda Less. Du förtjänar också att optimera bandbredd genom att minifiera din JS-kod. Du förtjänar också att kunna automatiskt kontrollera att din JS-kod är bra med JSHint.
Du förtjänar alla dessa bra saker.
Så du börjar använda alla dessa stora verktyg för hand, kör mer och mer kommandoraden manuellt. Ibland glömmer du att köra Mindre kompilatorn ... Ibland glömmer du att köra JSHint och en bugg skickas ...
Och plötsligt befinner du dig själv att undra: finns det någon lösning att automatisera alla dessa verktyg? Hur kan du skapa ett repeterbart arbetsflöde för att förhindra att du gör misstag?
Självklart finns det en lösning, och framför allt två verktyg väntar på att du ska komma igång: Grymta och Klunk.
Som nybörjare använder du dessa verktyg, undrar du hur de fungerar och vilken man ska använda, eller hur? Tja, perfekt då läser du rätt artikel!
Jag kommer att ge dig grunden för att använda Grunt och Gulp med ett riktigt enkelt exempel som du kan ladda ner från GitHub.
Det är en enkel webbplats bestående av tre filer:
Styles.less definierar CSS-arket på ett rikare sätt än det är möjligt med en vanlig CSS-fil. Till slut använder vi Mindre kompilatorn för att skapa en styles.css fil. Med mindre kan vi till exempel använda variabler i CSS-filen:
Få mer information om Mindre i den här Komma igång-guiden.
JavaScript och HTML-koden är verkligen enkla. Sidan ska se så här ut:
Du måste först först förstå hur Node.js Package Manager (npm) fungerar.
Npm är verktyget som levereras med Node.JS. Det brukar få verktyg och ramar samtidigt som de automatiskt löser sina beroende.
Till exempel, för att använda Mindre och kompilera den i en webbanvändbar CSS-fil måste du först installera Mindre med det här kommandot:
npm installera -g mindre
Obs! För att få kommandoraden npm måste du installera Node.js från nodwebbsidan.
När detta är klart kan du köra kommandot för att kompilera .lösa filer till .css:
lessc styles.less> styles.css
Npm använder en fil som den skapar och lagrar i den lokala mappen den arbetar i: package.json. Den här filen använder JavaScript Object Notation (JSON) format för att låta npm veta vilket verktyg och version som är installerat och de ramar som används av den nuvarande projekt (som representeras av den aktuella mappen).
Den här filen är viktig för Grunt and Gulp eftersom den innehåller listan över plugins som har laddats ner och kan användas i ditt arbetsflöde för automatisering.
För att skapa en tom package.json-fil kan du använda följande kommando npm:
npm init
Du kommer att gå igenom några frågor som du kan svara på med standardalternativet, och då är du redo att starta.
I den här filen kommer du att ha två typer av beroenden:
Npm ger i grunden dig tre sätt att installera paket:
Accentsconagua
-g eller -global alternativ--spara-dev alternativDen tredje kommer att skapa en devDependencies avsnitt / egendom i paketet package.json.
Grunt är en pionjär inom JavaScript-automations arbetsflödesområdet. Det finns många kända Grunt-användare som Twitter, jQuery och Modernizr.
Grundprincipen för Grunt är att ge oss ett enkelt sätt att springa uppgifter. En uppgift är en uppsättning kodfiler och konfigurationsfiler som redan har skapats för dig. Du kan få nya uppgifter genom att installera Grunt-plugins som du får använda npm. Du kan hitta ett plugin för nästan alla verktyg du kan använda, till exempel Mindre och JSHint.
För att köra Grunt måste du skapa en Gruntfile där du anger vilka uppgifter du vill köra och konfigurationen för var och en av dem. När detta är klart måste du bara springa grymta Kommandoraden anger den uppgift du vill köra (standard eller specifik) och det kommer att göra det automatiskt.
Låt oss nu gå igenom en steg-för-steg guide för att ställa in allt detta.
Använd npm för att initiera filen:
npm init
Du måste svara på några frågor som projektnamnet och vad är standard .js-filen. Du kan också välja att skapa filen manuellt och ställa in innehållet till:
"namn": "projektnamn", "devDependencies": , "beroenden":
Du måste installera Grunt globalt för att få kommandoraden och lokalt för att initiera allt som behövs för projektet.
Springa:
npm installera -g grunt
Kör sedan det lokalt:
npm installera grunt - save-dev
Obs! Glöm inte -dev del för att den ska anges som en av devDependencies i package.json fil.
Grunt fungerar med en fil med namnet gruntFile.js. Den här filen innehåller allt som behövs av Grunt, det vill säga:
Grunt förväntar sig att filen ska exportera en enda funktion som tar en parameter som heter "grunt". Du kommer att använda det här objektet för att utföra alla Grunt-relativa åtgärder.
Här är en minimal gruntfil som bara läser paketet pack.json och skapar en standard Uppgift som inte kör något.
Obs! Placera filen i projektmappen, sida vid sida med filen package.json.
module.exports = funktion (grunt) // Projektkonfiguration. grunt.initConfig (pkg: grunt.file.readJSON ('package.json'); // Standarduppgift (er). grunt.registerTask ('default', []); ; Du kan utföra det för att vara säker på att allt är korrekt konfigurerat.
För att göra det, öppna en kommandotolk i projektmappen och kör:
grymta
Du borde se något så här:
Nu när din Gruntfile är klar är nästa steg att lägga till ett plugin och använda det. Alla plugins finns i listan på Grunt webbplats. En av de vanliga uppgifterna som utförs i en Gruntfile kontrollerar om JavaScript-syntaxen är korrekt. För att göra det använder vi vanligtvis JSHint.
Låt oss lägga till detta i ditt grunt arbetsflöde.
Om du söker efter JSHint på grunt plugins sidan hittar du grunt-contrib-jshint, vilket motsvarar vad vi behöver!
I projektmappen kör:
npm installera grunt-contrib-jshint - save-dev
Ett sådant är gjort, du måste lägga till det i din Gruntfile.js. Det finns två enkla steg för det:
För att ladda plugin, använd loadNpmTasks fungera:
// Ladda plugin som ger "jshint" uppgiften grunt.loadNpmTasks ('grunt-contrib-jshint');Konfigurationen är klar i initConfigfunktion där du måste lägga till en ny egenskap i objektet som anges i parametern. Detta måste vara namnet på den uppgift du vill lägga till och är relaterad till plugin du använder. Det bästa sättet att känna till det namnet och listan över tillgängliga alternativ för uppgiften är att titta på plugin-dokumentationen. Du hittar alltid ett väl dokumenterat prov.
Till exempel, i vårt prov vill vi kolla alla JavaScript-filer utom gruntfile.js. Vi vill också aktivera en uppsättning regler för att checka in JavaScript-filerna som eqeqeq för att säkerställa att vi använder trippel lika när det behövs.
Här är initConfig funktion modifierad:
Du kan köra din uppgift genom att använda följande kommandorad (där du anger uppgiftsnamnet som en parameter för grymta):
grunt jshint
Resultatet är här:
Du måste bara springa det här kommandot och det kommer automatiskt att leda dig till eventuella fel det uppstår.
Grattis, du har nu en uppgift automatiserad i ditt grunt arbetsflöde!
Din JSHint-uppgift fungerar bra, men det är lite ensam i arbetsflödet. Vanligtvis använder vi verktyg som Grunt för att köra mer än en uppgift.
Det är väldigt enkelt att lägga till fler av dem, eftersom du bara måste följa samma steg. Låt oss säga att du nu vill lägga till kompileringen för din mindre fil inom den automatiserade processen. Om du söker i Grunt-plugins hittar du en grunt-contrib-mindre plugin som du kan installera i din projektmapp:
npm installera grunt-contrib-less - save-dev
Som med JSHint-uppgiften måste du lägga till konfigurationen:
Ladda sedan uppgiften:
Du kan nu köra Grunt och ange mindre Uppgift: Det här startar endast Mindre. Det är okej, men du vill köra alla uppgifter, eller hur? Det är den roll som standarduppgift.
När du bara kör grymta utan att ange någon uppgift, kommer den att söka efter en standard uppgiften och kör alla uppgifter som anges i dess array. Du kan ändra den för att köra mindre och jshint. Observera att du lägger till en grupp av uppgifter som standard, du måste ringa registerTaskfungera:
Från och med nu när du kör grymta, det kommer att springa jshint, och då mindre:
Du kan lägga till vilken uppgift du vill, och du kan också ange annan grupp av uppgifter som standard och kalla dem genom att skicka deras namn som ett argument till grymta kommandorad.
Lätt, rätt?
Nu är du en glad utvecklare. Alla dina repeterande uppgifter automatiseras i ett grunt arbetsflöde, och du måste bara springa grunt för att de ska kunna utföras. Men det kan göras ännu lättare. Det kan göras automatiskt.
För att göra det kan du lägga till en specifik uppgift som heter Kolla på. Denna uppgift kommer hela tiden att inspektera din arbetsmapp och, baserat på regler, när en fil ändras, kommer grunt att utföra en tillhörande uppgift.
Först installera Kolla på i din projektmapp:
npm installera grunt-contrib-watch - save-dev
Ladda det som alla andra uppgifter med hjälp av loadNpmTasks funktionen och konfigurera den. Konfigureringsdelen är lite annorlunda här eftersom du måste ange en konfiguration för varje uppgift du vill täcka med Kolla på.
För mer information kan du läsa hela dokumentationen för den här uppgiften.
När du vill aktivera Kolla på, du måste bara köra följande kommando:
grunt klocka
Och det kommer att utföra uppgifter varje gång en fil ändras och den här filen ligger inom ramen för de övervakade filerna för den specifika uppgiften.
Och det är allt! Nu vet du allt för att skapa automatiserat arbetsflöde med hjälp av grunt.
Gulp är ett alternativ till grunt. Det är lite senare och har ett rykte som mer flexibelt än grunt. Innan du väljer vilken du ska använda, låt oss ta en titt på hur gulp fungerar.
Gulp är ett arbetsflödesautomatiseringsverktyg. Som grunt fungerar det med hjälp av npm och package.json-filen. Alla tillgängliga plugins kommer också att hämtas med hjälp av npm och läggas till som devDependencies i paketet package.json.
En av de viktigaste skillnaderna är att Gulp använder strömmar. En ström är en uppsättning funktioner genom vilka en fil kommer att gå och ändras i minne. Filen kommer endast att skrivas på disken i slutet av processen, så det är mer effektivt. Gruntuppgifter, å andra sidan, fungerar som silor och kan inte kedjas.
Låt oss snabbt titta på hur Gulp fungerar genom att följa några enkla steg.
I likhet med Grunt måste du först skapa filen paket.json. Du kan använda exakt samma teknik som du använde för gruntprovet.
När paketet package.json har skapats, installera gulp globalt och lokalt med:
npm installera -g gulp
och
npm installera gulp - save-dev
Detta kommer att installera kommandoraden gulp och allt som behövs för att köra ett gulp-arbetsflöde.
Du måste då installera gulp utils, som innehåller gemensamma funktioner som delas av andra plugins:
npm installera gulp-util -save-dev
Slutligen skapa den minsta gulp-filen, som kommer att se ut så här:
Som du kan se är det lite annorlunda än grunnsyntaxen. I gulp laddas plugins med hjälp av fordra syntax som du kan vara van vid om du är en Node.js-utvecklare. Det finns även en standard uppgift definierad med hjälp av gulp.task fungera.
Om du kör klunkkommandoraden med hjälp av en kommandotolk i projektmappen, ska du se ett resultat så här:
För att använda ett plugin i smuts använder du samma funktion som den vi använde för att skapa standard uppgift. Detta beror på att du inte behöver använda ett visst namn för att skapa en uppgift. Du ringer bara gulp.task, Ange det namn du vill ha, och ge det en JavaScript-funktion som en andra parameter. När gulp kör uppgiften kommer den att köra den här funktionen.
För att använda ett plugin, ringer du det med det namn du valde när du behöver det. Vanligtvis kallar du det som en del av ett strömmande arbetsflöde som vanligtvis börjar med ett urval av filer. Detta görs med gulp.src fungera. Det kommer att välja en massa filer och returnera en ström som kan användas av en annan funktion med rör. Så kan du kedja flera åtgärder utan att skriva dem till disken. Du skickar bara strömmen från ett plugin till en annan.
Här är ett grundprov för Mindre:
Vi först kräva ("gulp-less") att ladda mindre plugin för gulp. (Vi använde det npm installera gulp-less - save-dev).
Sedan gulp.src kommer att välja alla .mindre filer, vi rör det till mindre()funktion och det är slutligen "piped" till gulp.destvilket anger var man ska skriva resultatet. Eftersom gulp.src kan välja mer än en fil anger gulp.dest en mapp.
När du förstår rörmodellen kan du enkelt få samma resultat som det vi fick med grunt.
Kraften är att du kan skapa anpassade uppgifter där du ringer mer än ett plugin och där du kan associera dem så som du vill.
Obs: det finns självklart också en klunk-watch plugin du kan använda för att automatisera lanseringen av ditt arbetsflöde!
Jag hoppas att du nu har en tydligare förståelse för varför du behöver ett automatiserings arbetsflöde och hur du kan använda Grunt eller Gulp för att få det.
Att välja en av dem är mer relaterad till den uppgift du vill uppnå.
Grunt är lätt att använda. Du behöver inte förstå rörsystemet, och uppnå enkla uppgifter blir enklare. Det är ett riktigt moget verktyg, som används av många kända redaktörer och utvecklare, och det finns många plugins tillgängliga.
Med det sagt kan sättet Gulp utformas ge dig mycket flexibilitet. Det har funnits ganska länge nu, och även om du inte hittar så många plugins som du kommer för Grunt, är alla de klassiska tillgängliga för Gulp.
Om du använder ett riktigt standardiserat arbetsflöde med vanliga steg som JSHint, uglifying, CSS-validering etc. är Grunt ett bra val. Om du är upp till mer komplicerade uppgifter blir Gulp en bra wingman.
Microsoft har en massa gratis lärande på många JavaScript-ämnen med öppen källkod, och vi har ett uppdrag att skapa mycket mer med Microsoft Edge. Här är några att kolla in:
Och några gratis verktyg för att komma igång: Visual Studio Code, Azure Trial och testverktyg för cross-browser - alla tillgängliga för Mac, Linux eller Windows.
Den här artikeln är en del av web dev-tekniken från Microsoft. Vi är glada att dela Microsoft Edge och den nya EdgeHTML-återgivningsmotor med dig. Få gratis virtuella maskiner eller testa fjärran på din Mac, iOS, Android eller Windows-enheten @ http://dev.modern.ie/.
