.net asp.net-core nuget bootstrap-4 asp.net-core-2.0

Cómo usar Bootstrap 4 en ASP.NET Core



asp.net-core nuget (10)

¿Por qué no solo usar un CDN? A menos que necesite editar el código de BS, solo necesita hacer referencia a los códigos en CDN.

Ver BS 4 CDN aquí:

https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

Al final de la página.

Quiero actualizar Bootstrap en ASP.NET Core con NuGet. Usé esto:

Install-Package bootstrap -Version 4.0.0

Agregó las dependencias, pero ¿cómo lo agrego a mi proyecto ahora? ¿Cuál es el camino para las dependencias locales de NuGet?

Al investigar esto, parece que el enfoque de LibMan funciona mejor para mis necesidades al agregar Bootstrap. Me gusta porque ahora está integrado en Visual Studio 2017 (15.8 o posterior) y tiene sus propios cuadros de diálogo.

El método predeterminado que VS agrega a los proyectos usa Bower, pero parece que está saliendo. En el encabezado de la página de Microsoft bower escriben:

Seguir un par de enlaces conducen a Usar LibMan con ASP.NET Core en Visual Studio, donde shows cómo se pueden agregar libs usando un cuadro de diálogo incorporado:

En el Explorador de soluciones, haga clic con el botón derecho en la carpeta del proyecto en la que se deben agregar los archivos. Elija Agregar> Biblioteca del lado del cliente. Aparece el cuadro de diálogo Agregar biblioteca del lado del cliente: [fuente: shows ]

Luego, para bootstrap simplemente (1) seleccione el paquete de desenvolvimiento, (2) escriba "bootstrap @ .." (3) Instalar. Después de esto, solo querrá verificar que todas las inclusiones en _Layout.cshtml u otros lugares sean correctos. Deberían ser algo como href = "~ / lib / bootstrap / dist / js / bootstrap ..." )

BS4 ahora está disponible en .NET Core 2.2 . En el instalador SDK 2.2.105 x64 seguro. Estoy ejecutando Visual Studio 2017 con él. Hasta ahora todo bien para nuevos proyectos de aplicaciones web.

Como otros ya mencionaron, el administrador de paquetes Bower , que generalmente se usaba para dependencias como esta en aplicaciones que no se basan en secuencias de comandos pesadas del lado del cliente, está saliendo y recomienda activamente pasar a otras soluciones:

..psst! Mientras Bower se mantiene, ¡recomendamos yarn y webpack para nuevos proyectos front-end!

Entonces, aunque todavía puede usarlo en este momento, Bootstrap también ha anunciado que getbootstrap.com/docs/4.0/migration/#breaking . Como resultado, las plantillas integradas de ASP.NET Core se están editando lentamente para alejarse también de ellas.

Desafortunadamente, no hay un camino claro hacia adelante. Esto se debe principalmente al hecho de que las aplicaciones web se están moviendo continuamente hacia el lado del cliente, lo que requiere sistemas de compilación complejos del lado del cliente y muchas dependencias. Entonces, si está creando algo así, es posible que ya sepa cómo resolver esto, y puede expandir su proceso de compilación existente para simplemente incluir Bootstrap y jQuery allí.

Pero todavía hay muchas aplicaciones web que no son tan pesadas en el lado del cliente, donde la aplicación todavía se ejecuta principalmente en el servidor y el servidor sirve vistas estáticas como resultado. Bower anteriormente completó esto al facilitar la publicación de dependencias del lado del cliente sin tanto proceso.

En el mundo .NET también tenemos NuGet y con versiones anteriores de ASP.NET, también podríamos usar NuGet para agregar dependencias a algunas dependencias del lado del cliente, ya que NuGet simplemente colocaría el contenido en nuestro proyecto correctamente. Desafortunadamente, con el nuevo formato .csproj y el nuevo NuGet, los paquetes instalados se encuentran fuera de nuestro proyecto, por lo que no podemos simplemente hacer referencia a ellos.

Esto nos deja con algunas opciones sobre cómo agregar nuestras dependencias:

Instalación de una sola vez

Esto es lo que están haciendo actualmente las plantillas ASP.NET Core, que no son aplicaciones de una sola página. Cuando los usa para crear una nueva aplicación, la carpeta wwwroot simplemente contiene una carpeta lib que contiene las dependencias:

Si observa detenidamente los archivos actualmente, puede ver que originalmente se colocaron allí con Bower para crear la plantilla, pero es probable que eso cambie pronto. La idea básica es que los archivos se copian una vez en la carpeta wwwroot para que pueda confiar en ellos.

Para hacer esto, simplemente podemos seguir la introducción de Bootstrap y descargar los archivos compilados directamente. Como se menciona en el sitio de descarga, esto no incluye jQuery , por lo que también debemos descargarlo por separado; si contiene Popper.js si elegimos usar el archivo bootstrap.bundle más tarde, lo cual haremos. Para jQuery, simplemente podemos obtener un solo archivo "comprimido, de producción" del sitio de descarga .

Esto nos deja con algunos archivos que simplemente extraerán y copiarán en la carpeta wwwroot . También podemos hacer una carpeta lib para aclarar que estas son dependencias externas:

Eso es todo lo que necesitamos, así que ahora solo tenemos que ajustar nuestro archivo _Layout.cshtml para incluir esas dependencias. Para eso, agregamos el siguiente bloque al <head> :

<environment include="Development"> <link rel="stylesheet" href="~/lib/css/bootstrap.css" /> </environment> <environment exclude="Development"> <link rel="stylesheet" href="~/lib/css/bootstrap.min.css" /> </environment>

Y el siguiente bloque al final del <body> :

<environment include="Development"> <script src="~/lib/js/jquery-3.3.1.js"></script> <script src="~/lib/js/bootstrap.bundle.js"></script> </environment> <environment exclude="Development"> <script src="~/lib/js/jquery-3.3.1.min.js"></script> <script src="~/lib/js/bootstrap.bundle.min.js"></script> </environment>

También puede incluir las versiones minimizadas y omitir los ayudantes de etiqueta <environment> aquí para hacerlo un poco más simple. Pero eso es todo lo que necesita hacer para comenzar.

Dependencias de NPM

La forma más moderna, también si desea mantener sus dependencias actualizadas, sería obtener las dependencias del repositorio de paquetes NPM. Puede usar NPM o Yarn para esto; en mi ejemplo, usaré NPM.

Para comenzar, necesitamos crear un archivo package.json para nuestro proyecto, para que podamos especificar nuestras dependencias. Para hacer esto, simplemente lo hacemos desde el cuadro de diálogo "Agregar nuevo elemento":

Una vez que tengamos eso, necesitamos editarlo para incluir nuestras dependencias. Debería verse algo así:

{ "version": "1.0.0", "name": "asp.net", "private": true, "devDependencies": { "bootstrap": "4.0.0", "jquery": "3.3.1", "popper.js": "1.12.9" } }

Al guardar, Visual Studio ya ejecutará NPM para instalar las dependencias por nosotros. Se instalarán en la carpeta node_modules . Entonces, lo que queda por hacer es obtener los archivos desde allí en nuestra carpeta wwwroot . Hay algunas opciones para hacer eso:

bundleconfig.json para agrupación y minificación

Podemos utilizar una de las diversas formas de consumir un bundleconfig.json para la agrupación y la minificación, como se explica en la documentación . Una manera muy fácil es simplemente usar el paquete BuildBundlerMinifier NuGet que configura automáticamente una tarea de compilación para esto.

Después de instalar ese paquete, necesitamos crear un bundleconfig.json en la raíz del proyecto con los siguientes contenidos:

[ { "outputFileName": "wwwroot/vendor.min.css", "inputFiles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "minify": { "enabled": false } }, { "outputFileName": "wwwroot/vendor.min.js", "inputFiles": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ], "minify": { "enabled": false } } ]

Básicamente, esto configura qué archivos combinar en qué. Y cuando vendor.min.css , podemos ver que vendor.min.css y vendor.js.css se crean correctamente. Entonces, todo lo que tenemos que hacer es ajustar nuestro _Layouts.html nuevamente para incluir esos archivos:

<!-- inside <head> --> <link rel="stylesheet" href="~/vendor.min.css" /> <!-- at the end of <body> --> <script src="~/vendor.min.js"></script>

Usando un administrador de tareas como Gulp

Si queremos avanzar un poco más hacia el desarrollo del lado del cliente, también podemos comenzar a usar herramientas que usaríamos allí. Por ejemplo, webpack que es una herramienta de compilación muy utilizada para todo. Pero también podemos comenzar con un administrador de tareas más simple como Gulp y hacer los pocos pasos necesarios nosotros mismos.

Para eso, agregamos un gulpfile.js a la raíz de nuestro proyecto, con los siguientes contenidos:

const gulp = require(''gulp''); const concat = require(''gulp-concat''); const vendorStyles = [ "node_modules/bootstrap/dist/css/bootstrap.min.css" ]; const vendorScripts = [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js", ]; gulp.task(''build-vendor-css'', () => { return gulp.src(vendorStyles) .pipe(concat(''vendor.min.css'')) .pipe(gulp.dest(''wwwroot'')); }); gulp.task(''build-vendor-js'', () => { return gulp.src(vendorScripts) .pipe(concat(''vendor.min.js'')) .pipe(gulp.dest(''wwwroot'')); }); gulp.task(''build-vendor'', gulp.parallel(''build-vendor-css'', ''build-vendor-js'')); gulp.task(''default'', gulp.series(''build-vendor''));

Ahora, también necesitamos ajustar nuestro package.json para tener dependencias en gulp y gulp-concat :

{ "version": "1.0.0", "name": "asp.net", "private": true, "devDependencies": { "bootstrap": "4.0.0", "gulp": "^4.0.2", "gulp-concat": "^2.6.1", "jquery": "3.3.1", "popper.js": "1.12.9" } }

Finalmente, editamos nuestro .csproj para agregar la siguiente tarea, lo que garantiza que nuestra tarea Gulp se ejecute cuando .csproj el proyecto:

<Target Name="RunGulp" BeforeTargets="Build"> <Exec Command="node_modules/.bin/gulp.cmd" /> </Target>

Ahora, cuando vendor.min.css , se ejecuta la tarea default Gulp, que ejecuta las tareas de build-vendor , que luego construye nuestros vendor.min.css y vendor.min.js tal como lo hicimos antes. Entonces, después de ajustar nuestro _Layout.cshtml al igual que arriba, podemos hacer uso de jQuery y Bootstrap.

Si bien la configuración inicial de Gulp es un poco más complicada que la anterior bundleconfig.json , ahora hemos ingresado al mundo de nodos y podemos comenzar a utilizar todas las otras herramientas geniales allí. Por lo tanto, podría valer la pena comenzar con esto.

Conclusión

Si bien esto de repente se volvió mucho más complicado que con solo usar Bower, también ganamos mucho control con esas nuevas opciones. Por ejemplo, ahora podemos decidir qué archivos se incluyen realmente dentro de la carpeta wwwroot y cómo se ven exactamente. Y también podemos usar esto para hacer los primeros movimientos en el mundo del desarrollo del lado del cliente con Node, que al menos debería ayudar un poco con la curva de aprendizaje.

Desafortunadamente, tendrá dificultades para usar NuGet para instalar Bootstrap (o la mayoría de los demás marcos JavaScript / CSS) en un proyecto .NET Core. Si miras la instalación de NuGet, te dice que es incompatible:

si debe saber dónde están las dependencias de los paquetes locales, ahora están en su directorio de perfil local. es decir, %userprofile%/.nuget/packages/bootstrap/4.0.0/content/Scripts .

Sin embargo, sugiero cambiar a npm o bower, como en la respuesta de Saineshwar.

El truco para mí es:

1) Haga clic derecho en wwwroot> Agregar> Biblioteca del lado del cliente

2) Escribí "bootstrap" en el cuadro de búsqueda

3) Seleccione "Elegir archivos específicos"

4) Desplácese hacia abajo y seleccione una carpeta. En mi caso elegí "twitter-bootstrap"

5) Marque "css" y "js"

6) Haga clic en "Instalar".

Unos segundos más tarde tengo todos ellos la carpeta wwwroot. Haga lo mismo para todos los paquetes del lado del cliente que desea agregar.

Libman parece ser la herramienta preferida por Microsoft ahora. Está integrado en Visual Studio 2017 (15.8).

Libman describe cómo usarlo e incluso cómo configurar una restauración realizada por el proceso de compilación.

La documentación de Bootstrap le dice qué archivos necesita en su proyecto.

El siguiente ejemplo debería funcionar como una configuración para libman.json.

{ "version": "1.0", "defaultProvider": "cdnjs", "libraries": [ { "library": "[email protected]", "destination": "wwwroot/lib/bootstrap", "files": [ "js/bootstrap.bundle.js", "css/bootstrap.min.css" ] }, { "library": "[email protected]", "destination": "wwwroot/lib/jquery", "files": [ "jquery.min.js" ] } ]

}

Pruebe Libman , es tan simple como Bower y puede especificar wwwroot / lib / como la carpeta de descarga.

Usamos bootstrap 4 en asp.net core pero hacemos referencia a las bibliotecas de "npm" usando la extensión "Package Installer" y descubrimos que esto es mejor que Nuget para las bibliotecas Javascript / CSS.

Luego usamos la extensión "Bundler & Minifier" para copiar los archivos relevantes para su distribución (desde la carpeta npm node_modules, que se encuentra fuera del proyecto) en wwwroot como nos gusta para el desarrollo / implementación.

Use el archivo de configuración nmp (agréguelo a su proyecto web), luego agregue los paquetes necesarios de la misma manera que lo hicimos con bower.json y guarde. Visual Studio lo descargará e instalará. Encontrará el paquete debajo del nodo nmp de su proyecto.