Share
Material Design Lite (MDL), zoals we hebben geleerd van eerdere tutorials, wordt geleverd met tal van UI-componenten, waaronder navigatie, kaarten en knoppen, waarmee we snel websites kunnen bouwen. Maar wat als u slechts één of enkele van deze functies wilt? In dat geval is het het beste om onnodige componenten te verwijderen, waardoor de stylesheets en JavaScript-bestanden lichter worden.
Voordat we beginnen te zien hoe dit kan worden gedaan, moeten de volgende hulpprogramma's op uw systeem zijn geïnstalleerd:
Tuts + tutorials Uw bouwtaken beheren met Gulp.js en de commandoregel voor webontwerp: Automation with Gulp helpt u om met Gulp aan de slag te gaan, indien nodig.
Om te beginnen moeten we de raw-bronbestanden van MDL pakken door ze uit de repository te kopiëren. Voer het volgende uit in Terminal- of opdrachtprompt:
git clone https://github.com/google/material-design-lite.git mdl
Met deze opdracht worden alle bestanden gedownload en opgeslagen in een nieuwe map met de naam "mdl". Navigeer naar de map, voer de cd mdl commando, en je zou het moeten vinden gecompileerde stylesheet en de JavaScript-indeling in gedeelten voor elk afzonderlijk onderdeel, evenals de mixins en variabelen in MDL.
Voer nu de volgende opdracht in de map uit om de MDL-afhankelijkheden in te voeren:
npm installeren
De afhankelijkheden omvatten Mocha, PhantomJS, samen met een aantal Gulp-plug-ins, zoals gulp-sass en gulp-autoprefixer. Dit zijn de tools en bibliotheken die nodig zijn om alle partials te compileren in een enkel bruikbaar stylesheet en JavaScript-bestand. Eenmaal voltooid, vindt u deze afhankelijkheden opgeslagen in een map met de naam "node_modules".
In dit voorbeeld gebruiken we de navigatiecomponent, maar we nemen ook de knoppen en de tekstveldcomponenten op zodat we een uitvouwbaar zoekveld in de navigatie kunnen toevoegen. Daarnaast nemen we de tab component, eenvoudig omdat we tabbladen in de navigatie kunnen toepassen.
Open nu het "material-design-lite.scss" -bestand en becommentarieer de relevante referenties van de componentstijl uit de lijst.
// Variabelen en mixins @ import "variabelen"; @import "mixins"; // Resets and dependencies @import "resets / resets"; @import "typografie / typografie"; // Components @ import "palet / palet"; // @import "rimpel / rimpel"; // @import "animatie / animatie"; // @import "badge / badge"; @import "knop / knop"; // @import "kaart / kaart"; // @import "checkbox / checkbox"; // @import "gegevenstabel / gegevenstabel"; // @import "footer / mega_footer"; // @import "footer / mini_footer"; // @import "pictogram-toggle / pictogram-toggle"; // @import "menu / menu"; // @import "voortgang / voortgang"; @import "layout / layout"; // @import "radio / radio"; // @import "slider / slider"; // @import "spinner / spinner"; // @import "switch / switch"; @import "tabbladen / tabbladen"; @import "textfield / textfield"; // @ import "tooltip / tooltip"; // @import "shadow / shadow"; // @import "grid / grid";
Open op dezelfde manier "gulpfile.js" en becommentarieer de onnodige JS onder de BRONNEN referentie.
var SOURCES = [// Componenthandler 'src / mdlComponentHandler.js', // Polyfills / dependencies 'src / third_party / ** / *. js', // Base components '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 ', // Complexe componenten (die basiscomponenten hergebruiken)' src / layout / layout.js ', // 'src / data-table / data-table.js', // En tot slot, de rimpelingen // 'src / ripple / ripple.js'];
Tenslotte, voer de slok commando in Terminal.
Met deze opdracht worden de stylesheet en het JavaScript-bestand gecompileerd en wordt de geminimaliseerde versie uitgevoerd in de map "dist". Omdat we zoveel onnodige onderdelen hebben verwijderd, zijn de stylesheet en het JS-bestand elk ongeveer 40% lichter.
Vergelijk dit met de standaard build (ongeveer 300 Kb): onze CSS is 113 Kb ongecompileerdBekijk de demo; onze navigatiecomponent en heel weinig anders!
Het is geheel aan jou wat je opneemt en verwijdert uit je Material Design Lite-build. Laat ons in de opmerkingen weten welke MDL-componenten u zelf zou extraheren en gebruiken.
Dit is het laatste deel van onze Lite-serie Learning Material Design. Ik hoop dat je het leuk hebt gevonden en dat het je heeft geholpen om aan de slag te gaan met MDL!
Accentsconagua