Share
Som utvecklare borde vi alltid leta efter sätt att påskynda och automatisera vårt arbetsflöde så mycket vi kan, men det här är inte alltid en enkel process. Vi måste komma ihåg att kompilera, minimera, sammanfoga och övergripande göra våra filer effektivare för att säkerställa snabbare belastningstider för våra slutanvändare, samtidigt som vi håller en organiserad filstruktur som gör att vi enkelt kan använda ändringar. Lyckligtvis finns det verktyg som hjälper oss med denna process och jag skulle vilja dela med mig av hur jag har ställt upp dem för att förbättra min WordPress-temat utveckling.
Vi vet alla att vi borde optimera våra CSS- och JavaScript-filer innan vi distribuerar vår WordPress-webbplats. Bombardera våra stylesheets med @importera uttalanden eller inklusive flera filer med > Taggar är inte det mest effektiva sättet, eftersom det ökar antalet begäranden som webbläsaren måste göra när du laddar våra webbplatser. Att byta ut detta manuellt kan vara en skrämmande uppgift, lägga till det faktum att vi också ska optimera våra bilder och HTML-sidor - vi arbetar för mycket arbete.
Lyckligtvis har några riktigt smarta människor skapat bra verktyg som kan hjälpa oss att göra vårt arbetsflöde så rakt fram som möjligt:
Jag skulle vilja fokusera på hur man implementerar dessa tekniker för WordPress-temat utveckling. Jag menar inte att ge en djupgående analys av dessa verktyg eftersom det finns några artiklar redan i Tuts + Network som gör ett bra jobb som förklarar hur man installerar och konfigurerar dem, till exempel:
Utan ytterligare ado ska jag utveckla ett litet testtema som beskriver de steg jag tar för att införliva dessa verktyg tillsammans.
Vi använder webbutiken + Hämta bunt för att ladda ner den senaste versionen av WordPress, förstås om du använder en annan IDE än Sublime Text 2 måste du använda en annan metod.
För vårt testtema skapar vi följande filstruktur:
Låt oss ta en snabb titt på varje mapp och fil och se vad de är för:
functions.php - Du kan inkludera vilken funktion du behöver i den här filen, jag börjar ladda jQuery i min wp_head åtgärd (bästa praxis säger att ladda jQuery och andra skript före den slutgiltiga koden, men plugins gillar att ladda egna skript i wp_head och om de är beroende av jQuery, kommer de inte att fungera), jag laddar också mina skript i wp_footer åtgärd (vi har inte skapat den här filen ännu).
Accentsconagua
funktion jvs_theme_setup () // Enqueue jQuery wp_enqueue_script ('jquery'); // Enqueue anpassade temskript i sidfot wp_enqueue_script ('custom-scripts', get_bloginfo ('template_url'). '/Js/script.min.js', array ('jquery'), falskt, sant); add_action ('after_setup_theme', 'jvs_theme_setup'); index.php - Inget extra speciellt här, bara en fil jag gillar att börja med i alla mina projekt, märker att det huvudsakliga stilarket kallas efter wp_head Detta tillåter oss att åsidosätta anpassade stilar som läggs till av plugins utan att använda otäcka !Viktig deklarationer.
><?php wp_title(' | '); ?> >
Du kanske har märkt att inte heller style.css inte heller script.min.js filer finns fortfarande, oroa dig inte att vi tar hand om det.
Först måste vi ställa in vår config.rb fil eftersom det här kommer att berätta kompass där våra stylesheets är och hur vi vill sammanställa dem, lagrar vi den inuti src mapp:
# Tema kataloger: http_path = "" css_dir = "..." sass_dir = "... / sass" images_dir = "... / img" javascripts_dir = "... / js" # Du kan välja din föredragna utskriftsstil här (kan överstyras via kommandot linje): output_style =: compact # För att aktivera relativa sökvägar till tillgångar via kompasshjälpsfunktioner. relative_assets = true # Om du vill inaktivera felsökningskommentarer som visar din markörs ursprungliga plats. # line_comments = false
Ingenting fancy här, det betyder bara att Compass kommer att leta efter vår .SCSS filer inuti sass mapp och sätt samman de sammanställda formatmallarna i vårt temas rotmapp, om du vill veta mer om hur du konfigurerar config-filen, hänvisar du bara till den officiella dokumentationen.
Låt oss se vår sass mapp igen och se vad vi kan göra nu.
Nu kan vi separera relaterade stilar i sina egna filer i en undermapp som heter partials och har en singel style.scss fil där kan vi ställa in de viktigaste stilar som ska se ut så här:
// Kompass bibliotek @ import "kompass"; // Globala variabler @ import "partials / base.scss"; // Normalisera element @import "partials / normalize.scss"; / * == | == Primärformat =========================================== ============ Författare: ======================================= ======================================= * / // Huvud stilar gå hit / * == ================================================== =================== * / // WP-specifika CSS-stilar @ import "partials / wp.scss"; // Non-semantic helpers classes @ import "partials / helpers.scss";
Lägg märke till hur vi prefixerade delfilerna med ett understreck, detta berättar kompass att ignorera dem eftersom vi bara vill sammanställa huvudformatarket. Nu om vi navigerar till vår src mapp i vår terminal och kör kompass kompilera det kommer att skapa en ny style.css filen inuti vårt sass mapp med alla våra partiklar sammanfogade i ett enda stilark. Vi saknar emellertid de nödvändiga kommentarrubrikerna för WordPress-teman, till höger?
Du måste ha Grunt installerat som samtidigt kräver Node.js men jag antar att du redan har den. Som standard stöder Grunt endast funktionalitet för JavaScript-filer, men det finns lyckligtvis tredje partstillägg som grunt-css och grunt-kompass som kan ta hand om resten av filerna vi behöver.
Så låt oss navigera till vårt src mappen i vår terminal och kör följande kommandon:
npm installera grunt-css npm installera grunt-kompass
Detta installerar båda tillägg lokalt så att vi kan importera / ladda dem med Grunt.
Låt oss nu organisera vårt js mapp:
Jag skapade en undermapp som heter libs där vi kan placera något skript från tredje part som vi behöver skapade jag också en script.js fil där vi kodar våra anpassade funktioner som körs vanligtvis när DOM: n är klar.
För att konfigurera Grunts konfigurationsalternativ måste vi skapa en ny fil som heter grunt.js, så låt oss göra en i vår src mapp med följande innehåll:
/ * global modul: false * / module.exports = funktion (grunt) // Projektkonfiguration. grunt.initConfig (meta: version: '0.1.0', banner: '/ *! PROJECT_NAME - v<%= meta.version %> - "+"<%= grunt.template.today("yyyy-mm-dd") %>\ n '+' * http://www.yoursite.com/\n '+' * Upphovsrätt (c) <%= grunt.template.today("yyyy") %> "+" Ditt företag; Licensierad MIT * / ', wpblock:' / *! \ n '+' Tema Namn: Testtema \ n '+' Tema URI: http://www.yoursite.com \ n '+' Beskrivning: Testtema \ n '+' Författare: Ditt namn \ n '+' Författare URI: http://www.yoursite.com \ n '+' Version: 1.0 \ n '+' * / ', lint: files: [' grunt.js ',' ... /js/script.js '], concat: dist: src: ['',' ... /js/libs/*.js ',' ... /js/script.js '], dest:' ... /js/script.min.js ', min: dist: src: '',''], dest:'', cssmin: dist: src: ['',' ... /sass/style.css '], dest:' ... /style.css ', titta på: files: ['',' ... /sass/*.scss '], uppgifter:' default ', jshint: alternativ: curly: true, eqeqeq: true, immed: sant, latedef: true, newcap: true, noarg: true, sub: true, undef: true, boss: true, eqnull: true, jquery: true, devel: sant, browser: true, globals: , uglify: , kompass: dist: forcecompile: true ); // Standard uppgift. grunt.registerTask ('default', 'lint concat min kompass cssmin'); // Kompassuppgifter grunt.loadNpmTasks ('grunt-compass'); // CSS-uppgifter grunt.loadNpmTasks ('grunt-css'); ; Wow! Det är mycket mer komplext än vår Compass-fil men jag gör mitt bästa för att försöka förklara det, läs igen Grunts officiella dokumentation för att veta mer om det.
Vad konfigurationsfilen gör är att berätta för Grunt att göra följande, i ordning, varje
den tid vi kör grymta kommandot från vår terminal inuti vårt src mapp:
Ännu bättre kan vi springa grunt klocka i vår terminal och det kommer att titta på förändringar
i våra JavaScript och Sass-filer och kör uppgifterna automatiskt. Söt va?
Förresten minskar Grunt inte bara javascriptfiler genom att ta bort whitespace och nya rader, det optimerar dina skript genom att byta namn på variabler som var myLongVariable = true; till var a = true; plus andra typer av magi för att göra dem ännu mindre! Jag måste erkänna att jag var lite skeptisk till den här funktionen men det är egentligen verkligen smart att se till att det inte kommer att bryta din kod (hittills har det inte brutit min).
grunt-kompass kan inte begränsa (åtminstone utan att ta bort kommentarer) och grunt-css kan inte läsa .SCSS filer, det var därför vi behövde sammanställa Sass-filer först till en enda .css fil.
Vi kan använda det vi har hittills och börja koda vårt tema men varför sluta nu när vi fortfarande har smutsiga mallar och bilder? För att hantera detta har jag ändrat det antbyggande manuset som brukade komma med HTML5 Boilerplate. Den här beror på myra så se till att du har den installerad.
Det här är väldigt länge och jag vill inte borra dig som visar hela konfigurationsfilen här, men i sammandrag varje gång du är redo att distribuera ditt tema i den verkliga världen behöver vi bara navigera till vår bygga mapp i vår terminal och kör ant bygga, det här kommer att:
Så i slutändan hamnar vi en ny mapp i vår temabasmapp som heter
publicera det ser så här ut:
Alla temafiler redo för implementering.
Så där har du det, det är i grunden mitt temautvecklings arbetsflöde. Tänk på att även om det ser väldigt länge ut måste du bara ställa in det och hämta basfilerna varje gång du behöver dem så i slutändan behöver du bara:
grymta eller grunt klocka i din terminalJag är säker på att det finns sätt att förbättra det så låt mig veta i kommentarerna nedan om ni hittar något intressant att göra det ännu bättre.
Uppdatering: Vi har gjort ett par mindre korrigeringar till kodfragmenten ovan. Det finns också en länk till GitHub-förvaret för denna handledning, och du kan hitta de fullständiga byggfilerna där.
