Share
HTML5 Boilerplate è ampiamente riconosciuto come una solida base per la costruzione di nuovi siti e applicazioni basati sul web. Detto questo, pochi sanno che lo strumento offre molto più che semplicemente impostare il tuo ambiente di sviluppo. Ti aiuta anche a "concludere" il tuo lavoro fornendo un fantastico processo di compilazione multipiattaforma.
Quindi perché potrebbe essere necessario questo strumento di costruzione? Perché è cotto in HTML5 Boilerplate e può aiutarti ad automatizzare l'ottimizzazione delle prestazioni web. Abbiamo scelto di utilizzare Apache Ant per gestire il carico di lavoro. Come mai?
Tutti gli altri strumenti hanno limitazioni che l'autore originale di Ant non potrebbe vivere con lo sviluppo di software su più piattaforme.
Molti sviluppatori non hanno familiarità con il processo di compilazione. Ma non preoccuparti; uno strumento di costruzione non è un mostro spaventoso. Tutto può essere configurato tramite un file XML relativamente semplice. Questo articolo ti aiuterà a capire come configurare lo strumento di costruzione, personalizzare il processo di compilazione e infine modificare le variabili ed eseguire la compilazione.
Lo script di build fa alcune ipotesi su come i tuoi file sono ordinati e strutturati. Ecco la struttura delle cartelle di HTML5 Boilerplate:
Accentsconagua
/ js / libs / - contiene librerie di script comuni: Modernizr, jQuery e un pngfix per IE6/ Js / mylibs / - contiene script di librerie personalizzate specifiche del sito/plugins.js - tutti i plugin jQuery/script.js - JavaScript specifico per sito / paginaIl costruire/ cartella contiene i seguenti elementi:
I file di build di Apache Ant sono scritti in XML. Questo file contiene il nostro progetto (Boilerplate Build) e obiettivi. Le destinazioni contengono elementi di attività. Ogni elemento dell'attività del file di build può avere un id attributo e in seguito può essere indicato dal valore fornito, che deve essere univoco.
default.properties contiene le opzioni di compilazione predefinite, la struttura del progetto e le opzioni di creazione hardcore, che esamineremo a breve.
Questo file definisce le sostituzioni per default.properties. Questo dovrebbe essere creato da un utente quando lui o lei ha bisogno di sovrascrivere determinati valori. Di conseguenza, non dovrebbe essere posto sotto il controllo della versione.
Gli strumenti sono un insieme di pacchetti, che includono opyipng, JPEGTran, compressore YUI e Compressore HTML.
Poiché l'obiettivo dello strumento di creazione è di essere indipendente dalla piattaforma, esamineremo i passaggi necessari per configurarlo, in base al tuo OS scelto.
brew install libjpeg optipng. Con MacPorts, utilizzare il seguente comando di installazione: porta installa jpeg optipng apt-get install libjpeg-progs optipng Lo strumento di compilazione non è altro che un file XML basato su Apache Ant. Di seguito è riportato un passaggio del processo di generazione predefinito. Questi elementi possono essere configurati modificando il build.xml file.
?
/ js / libs / i file sono miniati, ma non concatenati. Modernizr dovrebbe essere solo nel capo del documento. jQuery potrebbe essere estratto da un CDN e il pngfix sarà incluso solo per IE6./ Js / mylibs / contiene le tue altre varie librerie e plugin JavaScript. Tutti i file memorizzati qui qui saranno ridotti (a meno che non finiscano con .min.js), e quindi concatenato insieme.plugins.js e script.js, nel / Js / cartella, sono tutti tuoi. Questi saranno anche miniati e concatenati con il mylibs / File.?
Tutti i file CSS vengono minimizzati usando il compressore YUI. Il precedente script Ant verrà eseguito style.css attraverso il compressore YUI per la minificazione.
?
In HTML5 Boilerplate, abbiamo scelto di utilizzare optipng e jpegtran per l'ottimizzazione dell'immagine rispettivamente per immagini PNG e JPG. Detto questo, ci sono molti strumenti per l'ottimizzazione delle immagini. Se desideri farlo, sei libero di sostituire gli strumenti con i tuoi strumenti di ottimizzazione delle immagini preferiti.
Ad esempio, Smush.it utilizza ImageMagick per identificare il tipo di immagine e convertire i file GIF in file PNG. Utilizza quindi gifsicle per ottimizzare le animazioni GIF eliminando i pixel ripetuti in diversi fotogrammi.
? Commentando le linee di console.log
File come console.log, non sono necessari file di profilazione e test unitari per il rilascio del sito.
Di seguito sono elencate alcune varie opzioni per la minimizzazione dei file HTML:
htmlbuildkit - Conserva commenti, spazi multipli e comprime JavaScript e CSS in linea. htmlclean - Conserva più spazi, rimuove le quotazioni non necessarie e comprime JavaScript e CSS in linea htmlcompress - Rimuove le quotazioni non necessarie e comprime JavaScript e CSS in linea. HTML5 Boilerplate utilizza la stringa di query per il controllo delle versioni di JavaScript / CSS e il busting della cache.
HTML5 Boilerplate utilizza per impostazione predefinita la stringa di query per il controllo delle versioni di JavaScript / CSS e il busting della cache. Lo svantaggio di questo approccio è che alcuni proxy intermedi - e potenzialmente altri client - potrebbero non memorizzare nella cache le risorse che contengono stringhe di query. Ciò è dovuto all'euristica di base che contrassegna tali richieste come dati dinamici.
Lo strumento di generazione rimuoverà innanzitutto il controllo delle versioni della stringa di query e utilizzerà la numerazione della linea di base automatizzata per il controllo del rilascio e il busting della cache.
Non tutti i file dovranno essere pubblicati. Un perfetto esempio di ciò sarebbero i file generati dal sistema di controllo delle versioni come subversion e git.
Per impostazione predefinita, esiste un elenco di tipi di file e directory che verranno esclusi. Per aggiungere a questo elenco, è possibile cercare e trovare e aggiungi i tuoi exludes personalizzati ad esso.
Le variabili all'interno del file di build sono definite in default.properties e build.properties.
build.concat.scripts = true - Se impostato, più file di script verranno uniti insieme in un unico file coeso.build.delete.unoptimized = true - Se impostato, i file non ottimizzati verranno eliminati.file.exclude = nonexistentfile - Esclude il filtro file per la pubblicazione (non può essere vuoto).dir.publish = pubblica dir.build = build dir.tools = $ dir.build / tools dir.test = test dir.demo = demo dir.js = js?
La struttura del progetto contiene nomi di directory, come quelli mostrati sopra, così come la cartella JS principale, le librerie di utility JS e le cartelle che dovrebbero essere solo miniate ma non concatenate.
build.info = buildinfo.properties - La creazione di versioni è definitatool.yuicompressor = yuicompressor-2.4.2.jar - Compressore YUI è definito con yuicompressor-2.4.2.jar Infine, impareremo esattamente come è possibile utilizzare lo strumento di costruzione nei tuoi progetti! Fare riferimento ai seguenti passaggi per eseguire lo strumento di creazione.
cd build / formica script-002.min.js), cerca alcuni commenti HTML che si riferiscono all'inizio e alla fine del blocco di script. Attualmente, cerca . Ecco una lista di varie opzioni di costruzione che puoi scegliere per soddisfare le tue particolari esigenze:
formica - ottimizzazioni html minori (virgolette extra rimosse). script in linea / stile minisito (predefinito)formicaio della formica - tutto lo spazio bianco html mantenuto. script in linea / stile miniatoant minify - sopra ottimizzazioni più pieno di minificazione HTMLtesto della formica - come costruire ma senza l'ottimizzazione dell'immagine (png / jpg)L'ottimizzazione delle prestazioni non deve essere costosa o richiedere molto tempo. Con alcune regole riutilizzabili, è possibile impostare lentamente un processo di costruzione per automatizzare gli aspetti ripetitivi del lavoro di ottimizzazione. Apache Ant fornisce un framework potente, ma facile da usare, mentre HTML5 Boilerplate fa leva su questo per rendere l'ottimizzazione del web il più semplice possibile per gli sviluppatori web front-end. Grazie mille per la lettura!
