asp.net mvc - net - Cambiando automáticamente a archivos CSS y JS minificados en diferentes entornos

imagen en actionlink

Question

Estoy usando ASP.Net MVC 5 y también WebEssentials LESS aprovechando las WebEssentials LESS y bundle .

WebEssentials está configurado para crear archivos minified css y js en el guardado. Esta es una característica que quiero porque puedo monitorear la salida y reduce el tiempo de inicio de la aplicación ( no usando paquetes Asp.Net MVC ).

¿Cómo puedo hacer que mi aplicación automáticamente use la versión reducida de los archivos cuando se implementa sin tener que cambiar manualmente los nombres de los archivos?

Entonces, por ejemplo, desde:

<link href="somestyles.css" .. > 

a:

<link href="somestyles-min.css" .. >

Leí que podía combinar WebEssentials y Asp.Net MVC Bundles, siempre que desactivé la opción de minificación en Asp.Net MVC Bundles. Esto sustituiría los archivos MIN en producción ( web.config [debug="false"] ).

¿Es esta mi única opción o hay una mejor manera de lograr esto?

Answer 1

¿Es esta mi única opción o hay una mejor manera de lograr esto?

No es tu única opción, pero como trabajas en el ámbito de MVC, es una de las mejores opciones. Como está diseñado para ser aprovechado a diferentes niveles, como páginas individuales y diseños, se encargará de generar el enlace apropiado.

En general, recomendaría que utilice un marco de agrupamiento del lado del servidor orientado a MVC para que pueda manejar la generación de enlaces y le proporcione una API intuitiva.

SquishIt es un marco de código abierto que se integra bien con MVC, y también es capaz de conmutarse según criterios tales como un indicador de depuración para generar la fuente original frente a versiones minificadas.

Tanto SquishIt como los nuevos paquetes integrados de MVC son bastante similares en términos de lo que deben lograr.

Answer 2

El soporte de Grunt (y gulp) se agrega en el próximo Visual Studio. Estas son las herramientas de los desarrolladores de JavaScript para hacer lo mismo: agrupar para producción.

Grunt puede crear una versión de compilación que no se minimice para la prueba, sino que se minimice para la producción. Podría tomar más tiempo y esfuerzo, pero es el futuro en lugar de la MS lo que hicieron con la agrupación. Ya puedes usar grunt si tienes Node.js instalado y listo para el futuro.

Hay muchos recursos para comenzar a usar. Consulte también Introducción al soporte de Gulp, Grunt, Bower y npm para Visual Studio

Answer 3

Esta definitivamente no es la única manera. Otra forma sería desconectar por completo todas las herramientas basadas en Microsoft (es decir, paquetes, elementos esenciales de la web, etc.) y utilizar un Task Runner de Javascript. Luego, la compilación de superconjuntos y preprocesadores, la minificación y cualquier otro tipo de carga pesada de front-end puede estar en un solo lugar. También puede basarse en el entorno.

Así que vamos a abordar algunas de sus preocupaciones específicas.

Tarea ejecutándose con el sabor de nodejs y gulp

1. Descargar nodejs

2. Después de la descarga, abra un símbolo del sistema y navegue a la fuente de su proyecto. Por ejemplo:

   cd "C:/Users/beloud/Documents/Visual Studio 2013/Projects/YourProject"

3. Inicialice un proyecto de nodo ejecutando npm init . Esto le hará un montón de preguntas sobre su proyecto. Una vez completado, creará un archivo, package.json , que rastreará las dependencias de su nodo y los detalles del proyecto.

4. Ahora tenemos que instalar algunos paquetes. En el símbolo del sistema, ingrese los siguientes comandos:

   npm install gulp -g 
   npm install gulp --save-dev
   npm install gulp-less --save-dev
   npm install gulp-minify-css --save-dev
   npm install gulp-if --save-dev

   Instalamos Gulp a nivel mundial, por lo que podemos utilizarlo en cualquier lugar (se agregará una ruta para usted). Luego instalamos un puñado de paquetes localmente en nuestro proyecto que harán el trabajo real (minificación, procesamiento, etc.).

5. Cree un archivo en el mismo directorio que su package.json llamado gulpfile.js .

6. Ahora tenemos que crear nuestras tareas reales. En gulpfile.js , agregue lo siguiente:

   //these are the modules that we''ll be using in our task
   var gulp = require(''gulp''),
       less = require(''gulp-less''),
       gulpif = require(''gulp-if''),
       minifycss = require(''gulp-minify-css'');
   
   var isDebug = true; // I usually have a config.js file that has this and some handy static paths that I''ll be referencing regularly. Then I just require it above.
   gulp.task(''default'', function() {
     return gulp.src(''Content/less/**/*.less'')
       .pipe(less())
       .pipe(gulpif(isDebug === false, minifycss()))  //the first argument is the condition, the second is the method to call if the condition is true
       .pipe(gulp.dest(''Content/css''));
   });

7. Ejecute gulp en el símbolo del sistema. Eso ejecutará la tarea default . Básicamente, buscará menos archivos en todos los directorios en Content/less , los compilará en css, los isDebug si isDebug es false y lo isDebug a Content/css .

8. Vamos a hacerlo un poco más increíble agregando un reloj. Agregue lo siguiente a gulpfile.js :

   gulp.task(''watch'', function() {
     // Watch .less files
     gulp.watch(''Content/less/**/*.less'', [''default'']);
   });

   Al ejecutar gulp, la tarea permanecerá activa hasta que termine manualmente. Vigilará los cambios realizados en cualquier archivo menos Content/less y volverá a ejecutar la tarea en los cambios guardados.

9. Ahora, solo necesita incluir el nombre del archivo css, ya que seguirá siendo el mismo, independientemente del entorno.

Este es un ejemplo muy básico de usar un corredor de tareas para lograr lo que estás tratando de hacer. Puedes hacer mucho más con nodejs, gulp y todo lo demás que he mencionado. Personalmente, lo sugiero porque es mucho más poderoso que las herramientas únicas que está utilizando actualmente y Visual Studio 2015 ya está confiando mucho en esta nueva metodología, por lo que seguramente tendrá que aprender de todos modos.

Puede aprender más siguiendo este tutorial realmente sorprendente, Comenzando con Gulp , por Mark Goodyear .