Share
Șablonul HTML5 Boilerplate este recunoscut pe scară largă ca o bază solidă pentru construirea de noi site-uri web și aplicații. Acestea fiind spuse, puțini știu că instrumentul oferă mai mult decât pur și simplu configurare mediul de dezvoltare. De asemenea, vă ajută să vă "încheiați" lucrarea prin furnizarea unui proces minunat de construire pe mai multe platforme.
Deci, de ce ai nevoie de acest instrument de construire? Deoarece este cuprinsă în Boilerplate HTML5 și vă poate ajuta să automatizați optimizarea performanțelor web. Am ales să mergem cu Apache Ant pentru a face față volumului de muncă. Cum se face?
Toate celelalte instrumente au limitări pe care autorul inițial lui Ant nu le putea trăi atunci când dezvoltă software pe mai multe platforme.
Mulți dezvoltatori nu sunt familiarizați cu procesul de construire. Dar nu vă faceți griji; un instrument de construcție nu este un monstru înfricoșător. Totul poate fi configurat printr-un fișier XML relativ simplu. Acest articol vă va ajuta să înțelegeți cum să configurați instrumentul de construire, să personalizați procesul de construire și, în final, să modificați variabilele și să executați construcția.
Scriptul de construire face unele ipoteze despre modul în care fișierele sunt sortate și structurate. Aici este structura folderului HTML5 Boilerplate:
Accentsconagua
/ js / libs / - conține biblioteci de script comune: Modernizr, jQuery și pngfix pentru IE6/ Js / mylibs / - conține script-uri personalizate pentru site-ul bibliotecii/plugins.js - toate pluginurile jQuery/script.js - JavaScript specific site-ului / paginii construi/ dosarul conține următoarele elemente:
Apache Ant build-urile sunt scrise în XML. Acest fișier conține proiectul nostru (Boilerplate Build) și obiectivele. Obiectivele conțin elemente de activitate. Fiecare element de sarcină al fișierului de construcție poate avea un id atribut și ulterior poate fi referit la valoarea furnizată, care trebuie să fie unică.
default.properties conține opțiunile de construire implicite, structura proiectului și opțiunile de construire hardcore, pe care le vom examina în scurt timp.
Acest fișier definește suprascrierile pentru default.properties. Acest lucru ar trebui să fie creat de un utilizator atunci când el sau ea trebuie să suprascrie anumite valori. În consecință, nu ar trebui să fie plasat sub controlul versiunii.
Instrumentele sunt un set de pachete, care includ opyipng, compresor JPEGTran, YUI și Compresor HTML.
Deoarece obiectivul instrumentului de construire este de a fi agnostic pe platformă, vom examina pașii necesari pentru configurarea acestuia, în funcție de sistemul de operare ales.
brew instalați libjpeg optipng. Cu MacPorts, utilizați următoarea comandă de instalare: instalarea portului jpeg optipng apt-get instalează libjpeg-progs optipng Instrumentul de construire nu este altceva decât un fișier XML care se bazează pe Apache Ant. Mai jos este o plimbare prin procesul de construire predefinit. Aceste elemente pot fi configurate prin editarea build.xml fişier.
?
/ js / libs / fișierele sunt minificate, dar nu sunt concatenate. Modernizr ar trebui să fie singur în cap a documentului. jQuery ar putea fi tras de pe un CDN, iar pngfixul va fi inclus doar pentru IE6./ Js / mylibs / conține și alte diverse biblioteci și pluginuri JavaScript. Toate fișierele stocate aici vor fi minificate (dacă nu se termină cu .min.js), apoi concatenate împreună.plugins.js și script.js, în / Js / dosar, sunt toate ale tale. Acestea vor fi, de asemenea, minificate și concatenate cu mylibs / fișiere.?
Toate fișierele CSS sunt minificate folosind compresorul YUI. Scriptul de mai sus Ant va rula style.css prin compresorul YUI pentru minificare.
?
În HTML5 Boilerplate, am ales să folosim OptiPng și jpegtran pentru optimizarea imaginilor pentru imaginile PNG și JPG, respectiv. Acestea fiind spuse, există o mulțime de instrumente de optimizare a imaginilor. Dacă doriți să faceți acest lucru, aveți libertatea de a înlocui instrumentele cu propriile instrumente de optimizare a imaginii preferate.
De exemplu, Smush.it utilizează ImageMagick pentru a identifica tipul de imagine și pentru a converti fișierele GIF în fișiere PNG. Apoi, folosește gificlul pentru a optimiza animațiile GIF prin eliminarea pixelilor repetate în diferite cadre.
? Comentând liniile console.log
Fișiere cum ar fi console.log, profilări și fișiere de testare unitate nu sunt necesare pentru lansarea site-ului.
Mai jos sunt prezentate cateva optiuni de modificare a fisierelor HTML:
htmlbuildkit - Păstrează comentarii, spații multiple și comprimă JavaScript și CSS în linie. htmlclean - Păstrează mai multe spații, elimină ghilimele inutile și comprimă JavaScript și CSS inline htmlcompress - Elimină citate și comprimări inutile în JavaScript și CSS. Șablonul HTML5 Boilerplate utilizează șirul de interogări pentru versiunea JavaScript / CSS și bustarea cache-ului.
Șablonul HTML5 Boilerplate implicit utilizează șir de interogări pentru versiunea JavaScript / CSS și bustarea cache-ului. Dezavantajul cu această abordare este că unele proxy-uri intermediare - și, eventual, alți clienți - nu pot să stocheze cache-urile care conțin șiruri de interogare. Acest lucru se datorează euristicii de bază care semnalează astfel de solicitări ca date dinamice.
Instrumentul de construire va elimina mai întâi versiunea șirului de interogare și va utiliza numerotarea automată a liniei de bază pentru controlul eliberării și bustarea cache-ului.
Nu toate fișierele vor trebui publicate. Un exemplu perfect de acest lucru ar fi fișierele generate de sistemul de control al versiunilor, cum ar fi subversiunea și git.
În mod implicit, există o listă de tipuri de fișiere și directoare care vor fi excluse. Pentru a adăuga la această listă, puteți căuta și găsi și adăugați exludele dvs. personalizate la acesta.
Variabilele din fișierul de construcție sunt definite în default.properties și build.properties.
build.concat.scripts = true - Dacă este setat, mai multe fișiere de script vor fi împrăștiate împreună într-un singur fișier coeziv.build.delete.unoptimized = adevărat - Dacă este setat, fișierele neoptimizate vor fi șterse.file.exclude = nonexistentfile - Exclude filtrul de fișiere pentru publicare (nu poate fi gol).dir.publish = publicați dir.build = construiți dir.tools = $ dir.build / tools dir.test = test dir.demo = demo dir.js = js?
Structura proiectului conține nume de directoare, cum ar fi cele prezentate mai sus, precum și folderul JS de bază, bibliotecile de utilități JS și folderele care ar trebui minificate, dar nu concatenate.
build.info = buildinfo.properties - Versiunea de construire este definitătool.yuicompressor = yuicompressor-2.4.2.jar - Compresorul YUI este definit cu yuicompressor-2.4.2.jar În sfârșit, vom afla exact cum puteți utiliza instrumentul de construire în proiectele dvs.! Consultați pașii următori pentru a rula instrumentul de construire.
cd build / construcția ant script-002.min.js), acesta caută câteva comentarii HTML care se referă la începutul și la sfârșitul blocului de script. În prezent, ea caută . Iată o listă cu diferite opțiuni de construcție pe care le puteți alege pentru a se potrivi nevoilor dvs. specifice:
construcția ant - minore optimizări html (citate extra extrase). script inline / stil minified (implicit)furnici constructivi - toate spațiile de html păstrate. inline script / stil minificatant minify - optimizări de mai sus plus minime completă htmlfurnică text - la fel ca și construirea, dar fără optimizarea imaginii (png / jpg)Optimizarea performanței nu trebuie să fie costisitoare sau consumatoare de timp. Cu unele reguli reutilizabile, se poate configura încet un proces de construire pentru a automatiza aspectele repetitive ale lucrărilor de optimizare. Apache Ant oferă un cadru puternic, dar ușor de utilizat, în timp ce HTML5 Boilerplate utilizează pentru a face optimizarea web cât mai ușoară posibil pentru dezvoltatorii web de pe front-end. Vă mulțumesc foarte mult pentru lectură!
