Share
Material Design Lite (MDL), come abbiamo appreso dalle esercitazioni precedenti, include numerosi componenti dell'interfaccia utente, tra cui navigazione, schede e pulsanti, che ci consentono di creare rapidamente siti Web. Ma cosa succede se si desidera solo uno o alcune di queste funzionalità? In tal caso è meglio rimuovere componenti non necessari, illuminando i fogli di stile e i file JavaScript.
Prima di iniziare a vedere come ciò può essere fatto, è necessario che sul sistema siano installati i seguenti strumenti:
Tuts + tutorial Gestione delle attività di build con Gulp.js e Command Line per Web Design: Automation with Gulp ti aiuterà a iniziare con Gulp se necessario.
Per cominciare, dobbiamo prendere i file di origine raw di MDL copiandoli dal repository. Eseguire quanto segue in Terminale o Prompt dei comandi:
git clone https://github.com/google/material-design-lite.git mdl
Questo comando scaricherà tutti i file e li salverà in una nuova cartella chiamata "mdl". Passare alla cartella, eseguire il cd mdl comando, e dovresti trovare il non compilato foglio di stile e JavaScript separati in partial per ogni singolo componente, nonché i mixin e le variabili in MDL.
Ora, esegui il seguente comando all'interno della cartella per accedere alle dipendenze MDL:
installazione di npm
Le dipendenze includono Mocha, PhantomJS, insieme a un numero di plugin Gulp, come gulp-sass e gulp-autoprefixer. Questi sono gli strumenti e le librerie necessari per compilare tutti i partial in un unico foglio di stile utilizzabile e file JavaScript. Una volta completato, troverai queste dipendenze memorizzate in una cartella denominata "node_modules".
In questo esempio, utilizzeremo il componente di navigazione, ma includeremo anche i pulsanti e i componenti del campo di testo in modo che possiamo aggiungere un campo di ricerca espandibile nella navigazione. Inoltre, includeremo il linguetta componente, semplicemente perché possiamo applicare le schede nella navigazione.
Ora apri il file "material-design-lite.scss" e commenta i riferimenti di stile dei componenti pertinenti dall'elenco.
// Variabili e mixin @import "variabili"; @import "mixins"; // Reimposta e dipendenze @import "ripristina / ripristina"; @import "tipografia / tipografia"; // Components @import "palette / palette"; // @import "ripple / ripple"; // @import "animazione / animazione"; // @import "badge / badge"; @import "pulsante / pulsante"; // @import "card / card"; // @import "checkbox / checkbox"; // @import "data-table / data-table"; // @import "footer / mega_footer"; // @import "footer / mini_footer"; // @import "icon-toggle / icon-toggle"; // @import "menu / menu"; // @import "progress / progress"; @import "layout / layout"; // @import "radio / radio"; // @import "slider / slider"; // @import "spinner / spinner"; // @import "switch / switch"; @import "schede / schede"; @import "textfield / textfield"; // @import "tooltip / tooltip"; // @import "shadow / shadow"; // @import "grid / grid";
Allo stesso modo, apri "gulpfile.js" e commenta il JS non necessario sotto il FONTI riferimento.
var SOURCES = [// Gestore di componenti 'src / mdlComponentHandler.js', // Polyfills / dependencies 'src / third_party / ** / *. js', // Componenti di base 'src / button / button.js', // 'src / checkbox / checkbox.js', // 'src / icon-toggle / icon-toggle.js', // 'src / menu / menu.js', // 'src / progress / progress.js', // 'src / radio / radio.js', // 'src / slider / slider.js', // 'src / spinner / spinner.js', // 'src / switch / switch.js', 'src /tabs/tabs.js ',' src / textfield / textfield.js ', //' src / tooltip / tooltip.js ', // Componenti complessi (che riutilizzano i componenti di base)' src / layout / layout.js ', // 'src / data-table / data-table.js', // E infine, le increspature // 'src / ripple / ripple.js'];
Infine, esegui il sorso comando nel terminale.
Questo comando compila il foglio di stile e il file JavaScript, quindi restituisce la versione ridotta nella cartella "dist". Dato che abbiamo rimosso così tante parti non necessarie, il foglio di stile e il file JS sono ciascuno di circa il 40% più leggero.
Confronta questo con la versione standard (circa 300 Kb): il nostro CSS è di 113 Kb non compilatoDai un'occhiata alla demo; il nostro componente di navigazione e pochissimo altro!
Spetta interamente a te ciò che includi e rimuovi dalla tua build di Material Design Lite. Facci sapere nei commenti quali componenti MDL estraggerei e utilizzare da soli.
Questa è l'ultima puntata della nostra serie Learning Material Design Lite. Spero che tu l'abbia trovato divertente e che ti abbia aiutato a iniziare con MDL!
Accentsconagua