Share
I det första inlägget i denna serie gav jag en snabb översikt över Grunt och i nästa post kommer jag att gå igenom de nödvändiga stegen om hur du använder Grunt kan förbättra dina WordPress-utvecklingsförmåga.
Specifikt talar vi djupt om de nödvändiga filerna som package.json och Gruntfile.js, men för nu ska vi skapa några exempelfiler så att du kan köra Grunt med ditt WordPress-tema eller pluginprojekt.
Innan du börjar kan det hjälpa till att granska innehållet som nämns i den första artikeln i den här serien.
När du är på gång, gå tillbaka till den här artikeln och vi kommer igång med att skapa våra projektfiler. Detta ger slutligen en översikt över hur det ser ut som att Grunt är konfigurerat för ett visst projekt.
I nästa artikel ska vi titta på hur man gör det specifikt för WordPress-arbetet, men vi kommer att fokusera på ett mer generiskt tillvägagångssätt för nu.
Det första vi ska göra är att skapa en package.json filen i projektets rot. Innehåll den nya filen, lägg till följande:
"namn": "projektnamn", "version": "1.0.0", "beskrivning": "fantastiskt projekt"
Det finns inget behov av att lägga till devDependencies objekt, eftersom det kommer att läggas till automatiskt när vi installerar Grunt-uppgifter via kommandoraden.
För att installera Grunt-uppgifter måste du växla över till ditt valfria kommandoradsverktyg. Om du är på en Mac, skulle det vara Terminal eller iTerm. Om du är på en dator, skulle jag föreslå att du använder PowerShell.
Först navigera till ditt projekt rotmapp ("cd-utvecklings-mapp / projektmapp"). Nästa kommer vi att installera en uppgift för att kompilera LESS-filer. Vi kommer att installera den grunt-contrib-less uppgiften, skriv sedan in följande i din kommandorad och träffa Stiga på:
npm installera grunt-contrib-less - save-dev
Du kommer att börja se att en rad linjer skrivs ut som uppgiften och alla dess beroenden hämtas från npm. När det är klart bör du se något så här:
Nu borde du kunna gå till din package.json fil och se grunt-contrib-mindre läggas till din 'devDependencies' föremål också. Du kommer också att lägga till versionsnumret bredvid namnet. Jag kunde prata om versionsnotering i ett helt annat inlägg, men för nu vet jag att tilde avser den version som vi för närvarande arbetar med.
Vid denna tidpunkt bör du se följande:
"namn": "projektnamn", "version": "1.0.0", "beskrivning": "Fantastiskt projekt", "devDependencies": "grunt-contrib-less": "~ 0.9.0"
Nästa upp, låt oss lägga till en uppgift för att titta på förändringar i vår '.mindre' filer. Vi ska använda Grunt-Contrib-Watch-uppgiften. Hoppa tillbaka till kommandoraden och slå Stiga på:
npm installera grunt-contrib-watch - save-dev
Återigen bör du se lite utmatning på skärmen och när den är klar kommer den att läggas till din package.json fil. Det borde nu se ut så här:
"namn": "projektnamn", "version": "1.0.0", "beskrivning": "Fantastiskt projekt", "devDependencies": "grunt-contrib-less": "~ 0.9.0" "grunt-contrib-watch": "~ 0.5.3"
Förhoppningsvis kommer du nu att hänga på det och du kan använda samma process för att lägga till andra Grunt-uppgifter. Bara en påminnelse om att alltid lägga till '--Save-dev'.
Nu när vi har ett par Grunt-uppgifter installerade, låt oss börja använda dem. Det första vi behöver göra är att skapa en Gruntfile.js filen i vårt projekts rotmapp. Det är här vi ska ange våra uppgifter och konfigurera dem.
För att göra detta lägger du till följande i filen:
module.exports = funktion (grunt)
Det första vi behöver göra är att ladda in våra uppgifter så att vi kan utföra dem. Du gör det genom att lägga till med loadNpmTasks funktion för varje uppgift. Vänligen lägg till följande inuti de krökta axlarna:
grunt.loadNpmTasks ( 'grunt-contrib-mindre');grunt.loadNpmTasks ( 'grunt-contrib-watch');
Nästa sak som vi behöver göra är att konfigurera konfigurationen för våra installerade Grunt-uppgifter. Vi måste använda initConfig funktion så här:
grunt.initConfig (pkg: grunt.file.readJSON ('package.json');
Nu efter komma, lägger vi till vår konfiguration för varje uppgift vi installerade. Du hittar vanligtvis exempel på hur du konfigurerar varje uppgift i README.md filen i projektet på GitHub. Varje uppgift kommer att ha olika konfigurationsalternativ, så var noga med att kolla in dokumentationen först.
Den första uppgiften vi ska konfigurera är grunt-contrib-mindre uppgift. Den här kommer att sammanställa vår .mindre filer till .css filer för oss. Du vill skapa en ny mapp för din .mindre filer och skapa en ny. Jag brukar skapa en css / mindre mapp och lägg alla mina .mindre filer där inne.
Gå vidare och lägg till en ny fil med namnet style.less och lägg till en kod i den som så:
en färg: blå; &: sväva färg: röd;
Nu, låt oss gå tillbaka till vårt Gruntfile.js fil och lägg till följande:
mindre:
alternativ:
sökvägar: 'css / less',
yuicompress: true
,
filer:
'style.css': 'css / mindre / style.less'
När du har sparat filen ska du kunna bläddra till kommandoraden och skriva in grunt mindre och slå Stiga på. Detta kommer att sparka upp den grunt uppgiften och kompilera vår .mindre fil och skapa en ny style.css filen i vårt projekt rotmapp.
Nu när vi har en uppgift att sammanställa vår .mindre filer, låt oss lägga till en klockuppgift för den. Vem vill gå till kommandoraden och springa grunt mindre varje gång vi gör ändringar i en fil, rätt?
Efter vår tidigare konfiguration lägger du till ett kommatecken så här:
Kolla på:
mindre:
filer: 'css / mindre / *. mindre',
uppgifter: "mindre"
När du har sparat filen, vänd tillbaka till kommandoraden och skriv in grunt klocka. Detta bör se följande:
Det betyder att Grunt klockan väntar på några ändringar i en av de filer du angav i din konfiguration. Gå till din style.less fil och gör en ändring som så:
en färg: blå; &: sväva färg: grön;
När du har sparat filen kommer klockuppgiften att sparka och kompilera din .mindre filer till din style.css fil. När det är klart kommer det att fortsätta att titta på dessa filer och redo för en annan förändring.
Eftersom det är igång, gör allt du behöver göra nu gör en ändring i en fil, spara den och vänd sedan till webbläsaren för att se ändringarna.
Vi har nu allting för att använda Grunt med ditt nästa projekt. Det var en ganska enkel installation och jag är säker på att du kan se alla möjliga uppgifter du kan ha i ditt projekt. Senare i serien planerar jag att täcka mer avancerade funktioner med Grunt som anpassade uppgifter, nestad konfiguration och andra godisar.
Men först tar vi en titt på hur man införlivar detta med våra WordPress-projekt.
Accentsconagua