¿Cómo agregar fácilmente bibliotecas front-end a ASP.NET 5?

Para agregar una biblioteca front-end a través de Bower (tome la instalación de MetroUI presentada anteriormente como ejemplo), abra el archivo bower.json en el proyecto y agregue una línea de descripción en "Dependencias": "metro": "3. 0 5". Al ingresar el nombre del paquete, VS dará indicaciones mediante detección inteligente, incluida la selección de números de versión. El código final es el siguiente:

{ "name": "ASP.NET", "private": true, "dependencies": { "bootstrap": "3.3.4", "jquery": " 1.10.2", "jquery-validation": "1.11.1", "jquery-validation-obtrusive": "3.2.2", "hammer.js": "2.0.4", "bootstrap-touch-carousel" ": "0 . 8 . 0", "0"

}

}

Después de agregar esta línea, guarde el archivo bower.json, VS lo hará. restaurar automáticamente el paquete MetroUI. Expanda el nodo "Bower" debajo del nodo "dependencias" en el proyecto y verá el nodo "metro (3.0.5)". Dependiendo de las condiciones de la red y del tamaño del paquete de software, es posible que deba esperar un momento hasta que desaparezca la palabra "No instalado" detrás de este nodo, lo que indica que el paquete de software se ha restaurado correctamente. Si hay un problema con la recuperación automática, también puede hacer clic en el nodo y seleccionar "Actualizar paquete" en el menú contextual.

El paquete de instalación simplemente se descarga en la carpeta correspondiente de la carpeta "bower_components" en la carpeta del proyecto. También debe copiar el archivo de lanzamiento del paquete al directorio lib a través de un ejecutor de tareas como Gulp o Grunt (el directorio lib se basa en los hábitos de VS y también se pueden seleccionar otros directorios). Dado que la plantilla de proyecto predeterminada de VS usa Gulp, abra el archivo gulpfile.js y busque la tarea "copiar". En Gazebo, agregue una descripción de la copia. Dado que los archivos de lanzamiento de MetroUI se colocan en dos carpetas, a saber, "compilación" y "fuentes", escribir una descripción de copia requiere un poco de habilidad para manejar copias de varias carpetas. Consulte el siguiente código:

var bower = { "bootstrap": "bootstrap/dist/* */*. {js, map, css, ttf, svg, woff, eot}, "bootstrap-touch -carrusel": "bootstrap-touch-carrusel/dist/* */*. {js, css}, "hammer.js": "hammer.js/hammer*. {js, map}, "jquery": "jquery/jquery*. {js, mapa}, "jquery-validation": "jquery-validation/jquery.validate.js", "jquery-validation-obtrusted": "jquery-validation-obtrusted/jquery.validate.obtrusted.js", "metro ": "metro/build/**/*. {js, mapa, css}, "metro/fonts": "metro/fonts/*.

{ttf, svg, woff, eot} "

}

Después de mejorar el código de la tarea Gulp, también debe realizar la tarea de copia para copiar el archivo de versión de metro a wwwroot. una carpeta específica (lib en este caso), la tarea Gulp se puede ejecutar manualmente en el explorador del ejecutor de tareas o automáticamente compilando la solución o proyecto.

Finalmente, se instala la biblioteca front-end. haga referencia a él en HTML o vea archivos. No repetiré el método de escritura específico.

Debe decirse que el modelo de desarrollo front-end de VS 2015 y ASP.NET 5 no solo conserva las rutinas populares. en la industria también aprovecha al máximo las potentes funciones IDE de Visual Studio, lo que hace que sea conveniente para todos agregar bibliotecas front-end.