Dashboardkit 1.0.0

Introducción

Dashboardkit 1.0.0 es una plantilla de ejemplo con Bootstrap 5 originalmente distribuida en https://dashboardkit.io.

Tiene una parte gratuita y una parte PRO con licenciamiento de costo incremental según forma de uso, llegando a un elevado precio para el caso SaaS, por esto empleamos la versión gratuita que tiene licencia MIT. A manera de referencia, dejamos una copia del zip con la versión gratuita en https://drive.google.com/file/d/1XEFdgm2tjKqmj-T4aCarPBooAdxBZt-n/view?usp=sharing

Ver ejemplo que demuestra posibilidades de dashboardkit

Tras decargar versión gratuita se puede descomprimir con:

mkdir dk1
cd dk1 
unzip ../dashboardkit-free-v1.0.zip

que genera la siguiente estructura de directorios (son más archivos de los que se presentan):

|- dist +
|       |- assets +
|       |         |- css +
|       |         |- fonts +
|       |         |- images +
|       |         |- js +
|- gulpfile.js
|- package-lock.json
|- package.json
|- src +
       |- assets +
                 |- css
                 |- fonts
                 |- images
                 |- js
                 |- scss

En el directorio dist va preparado lo proveniente de src, listo para ser visualizado desde un navegador. Si se sirve con un servidor web y se abre con un navegador se verá el ejemplo.

Es posible generar dist a partir de src con:

cd dk1
yarn install
yarn global add gulp
gulp build sass build-js build-html imgmin

Las reglas de la generación se especifican en gulpfile.js.

Entonces los paquetes citados en package.json y las 5 reglas del gulpfile.js (build, sass, build-js, build-html e imgmin) permiten generar el ejemplo de dashboardkit que ilustra sus posibilidades.

Paquetes que emplea

Los paquetes de package.json son:

Paquete	Documentación	Resumen	Versión más reciente
animate.css 3.7	https://animate.style/	Librería para añadir pequeñas animaciones a los elementos de una página	4
apexcharts 3.6.9	https://apexcharts.com/	Librería para crear gráficas estadísticas intercativas	3.26
bootrap 5	https://getbootstrap.com/	Juego de herramientas para la interfaz	5
feather-icons 4.25	https://github.com/feathericons/feather	Iconos de fuentes abiertas	4.28
jquery 3.4	https://jquery.com/	Libería para facilitar operación con DOM	3.6
perfect-scrollbar 1.4.0	https://github.com/mdbootstrap/perfect-scrollbar#readme	Plugin con barra de desplazamiento minismalista	1.5.1
prismjs 1.16	https://prismjs.com	Resaltador de sintaxis	1.23

Reglas del gulpfile

build

La regla build copia de build a dist, algunos javascript y css:

 js: [                                                                    
      "node_modules/bootstrap/dist/js/bootstrap.min.js",                   
      "node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",      
      "node_modules/feather-icons/dist/feather.min.js",                    
      "node_modules/apexcharts/dist/apexcharts.min.js",                    
 ],                                                                       
 css: [                                                                   
       "node_modules/bootstrap/dist/css/bootstrap.min.css",                 
       "node_modules/animate.css/animate.min.css",    
 ] 

sass - Compila archivo .scss en css

No hace más que procesar los scss para generar un css.

build-js - Copia Javascript

Copia los javascript (*.js) de src/assets/js a dist/assets/js y de src/assets/js/pages a dist/assets/js/pages.

Infortunadamente algunos de los Javascript de src ya están minimizados (pcoded.js, plugins/gmaps.min.js y vendor-all.min.js). El uso de módulos que se detecta es:

• pcoded.js no usa modulos, resulta ser el javascript principal, está minimizado.
• vendor-all.min.js parece usar UMD, esta minimizado.
• plugins/gmaps.min.js parecer usar UMD, está minimizado

Cada uno de los 3 js de pages requieren jquery y se agregan al DOM con $(document).ready(function() { .... Se verifica que son cargados de manera individual desde html/map-google.html, html/chart-apex.html e index.html.

build-html

Esta regla copia de src/html a dist pero haciendo inserciones de fragmentos disponibles en src/html/layout cada vez que en un html se usa algo como @@include('archivo.html') Se explica en https://www.npmjs.com/package/gulp-file-include

imgmin

Mediante el plugin para gulp https://www.npmjs.com/package/gulp-smushit optimiza las imagenes de src/assets/img