Consejo rápido Pick 'n' Mix MDL Components con Gulp

Material Design Lite (MDL), como hemos aprendido de los tutoriales anteriores, viene con muchos componentes de la interfaz de usuario, que incluyen navegación, tarjetas y botones, que nos permiten crear sitios web rápidamente. Pero, ¿qué sucede si solo desea una o algunas de estas funciones? En ese caso, es mejor eliminar componentes innecesarios, aligerando las hojas de estilo y los archivos JavaScript. 

Antes de comenzar a ver cómo se puede hacer esto, deberá tener las siguientes herramientas instaladas en su sistema:

  1. Git.
  2. Gestor de paquetes del nodo (NPM).
  3. Trago. 

Tuts + tutoriales Administrando sus tareas de compilación con Gulp.js, y The Command Line para diseño web: la automatización con Gulp lo ayudará a comenzar con Gulp si es necesario..

Obtener la fuente MDL

Para empezar, tenemos que agarrar los archivos de origen en bruto MDL copiándolos desde el repositorio. Ejecute lo siguiente en Terminal o Símbolo del sistema:

git clone https://github.com/google/material-design-lite.git mdl 

Este comando descargará todos los archivos y los guardará en una nueva carpeta llamada "mdl". Vaya a la carpeta, ejecute el cd mdl comando, y usted debe encontrar el sin compilar la hoja de estilo y el JavaScript se separaron en parciales para cada componente individual, así como los mixins y las variables en MDL.

Dependencias MDL

Ahora, ejecute el siguiente comando dentro de la carpeta para extraer las dependencias de MDL:

npm instalar

Las dependencias incluyen Mocha, PhantomJS, junto con una serie de complementos de Gulp, como gulp-sass y gulp-autoprefixer. Estas son las herramientas y bibliotecas que se requieren para compilar todos los parciales en una sola hoja de estilo y archivo de JavaScript. Una vez completado, encontrará estas dependencias almacenadas en una carpeta llamada "node_modules".

Personalizar

En este ejemplo, usaremos el componente de navegación, pero también incluiremos los botones y los componentes del campo de texto para que podamos agregar un campo de búsqueda expandible en la navegación. Además, incluiremos el lengüeta componente, simplemente porque podemos aplicar pestañas en la navegación. 

Ahora abra el archivo “material-design-lite.scss” y comente las referencias de estilo del componente relevante de la lista.

// Variables y mixins @import "variables"; @import "mixins"; // Restablecimientos y dependencias @import "resets / resets"; @import "tipografía / tipografía"; // Componentes @import "paleta / paleta"; // @import "ripple / ripple"; // @importar "animación / animación"; // @import "badge / badge"; @importar "botón / botón"; // @importar "tarjeta / tarjeta"; // @import "checkbox / checkbox"; // @import "data-table / data-table"; // @import "footer / mega_footer"; // @import "footer / mini_footer"; // @import "icon-toggle / icon-toggle"; // @import "menu / menu"; // @importar "progreso / progreso"; @importar "diseño / diseño"; // @import "radio / radio"; // @import "slider / slider"; // @import "spinner / spinner"; // @import "switch / switch"; @import "tabs / tabs"; @import "textfield / textfield"; // @import "tooltip / tooltip"; // @import "shadow / shadow"; // @import "grid / grid";

Del mismo modo, abra "gulpfile.js" y comente el JS innecesario bajo el FUENTES referencia.

var FUENTES = [// Controlador de componentes 'src / mdlComponentHandler.js', // Polyfills / dependencies 'src / third_party / ** / *. js', // Componentes 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 ', // Componentes complejos (que reutilizan componentes básicos)' src / layout / layout.js ', // 'src / data-table / data-table.js', // Y finalmente, las ondulaciones // 'src / ripple / ripple.js'];

Construir

Por último, ejecute el trago comando en la terminal.

Este comando compila la hoja de estilo y el archivo JavaScript, luego envía la versión minificada a la carpeta "dist". Como hemos eliminado tantas partes innecesarias, la hoja de estilo y el archivo JS son aproximadamente un 40% más ligeros.

Compare esto con la versión estándar (alrededor de 300 Kb): nuestro CSS es de 113 Kb sin compilar

Echa un vistazo a la demo; Nuestro componente de navegación y muy poco más.!

Conclusión

Depende totalmente de usted lo que incluya y elimine de su compilación de Material Design Lite. Háganos saber en los comentarios qué componentes de MDL extraería y utilizaría por su cuenta..

Esta es la última entrega de nuestra serie Learning Material Design Lite. Espero que lo hayas disfrutado y que te haya ayudado a comenzar a utilizar MDL.!