Bundler & Minifier - Crea tus bundles en Visual Studio 2015

Sep 30, 2015 9:00:00 AM / by daniel.comas

 

Uno de los pasos que tendréis que hacer para migrar vuestros proyectos de VS 2013 a 2015 seguro que será el uso de bundles.

 

Los bundles para los más despistados es comprimir y/o minificar un conjunto de ficheros.

 

Vamos a recordar como se hacía con VS 2013 y Web Extensions 2013

 

 

 

y en el fichero x.js.bundle tendríamos:

 

<?xml version="1.0" encoding="utf-8"?>
<bundle xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/bundle.xsd">
<settings>
<!--Determines if the sprite image should be automatically optimized after creation/update.-->
<minify>true</minify>
<!--Determin whether to generate/re-generate this sprite on building the solution.-->
<runOnBuild>true</runOnBuild>
<!--Use absolute path in the generated CSS files. By default, the URLs are relative to generated bundled CSS file.-->
<adjustRelativePaths>false</adjustRelativePaths>
<!--Specifies a custom subfolder to save files to. By default, compiled output will be placed in the same folder and nested under the original file.-->
<outputDirectory />
</settings>
<!--The order of the <file> elements determines the order of the images in the bundle.-->
<files>
<file>/js/services/customerService.js</file>
<file>/js/services/departmentService.js</file>
<file>/js/services/deviceBrandService.js</file>
...
</files>
</bundle>

 

Ahora con VS 2015 y Bundler & Minifier (No está en el Web Extension 2015)

  

  

Como véis el x.bundle.js, ahora lo tendremos en la raíz del proyecto:

  

 

bundleconfig.json

 

Tendremos todos los bundles unidos en un sólo fichero

 

[
{
"outputFileName": "js/pages/pages.js",
"inputFiles": [
"js/pages/amadeus_default.js",
...
]
},
{
"outputFileName": "js/services/services.js",
"inputFiles": [
"js/services/amadeusService.js",
...
]
}
]

 

bundleconfig.json.bindings

 

Con una de las características nuevas de VS 2015 el Task Runner Explorer relacionaremos la compresión y minificación. En este caso en cada save de fichero contenido en el bundle y al ejecutar la compilación:

 

///&lt;binding BeforeBuild='All files' /&gt;

 

  

 

La integración del Bundler & Minifier con el Task Runner Explorer la encontraréis en la versión > 1.3.93. Dado que ahora mismo es un fix y no está en OTA, lo podréis encontrar en http://vsixgallery.com/extension/a0ae318b-4f07-4f71-93cb-f21d3f03c6d3/

 

Podéis encontrar más información en los detalles en GitHub de la modificación: https://github.com/madskristensen/BundlerMinifier/issues/59#issuecomment-142519072

 

 

Topics: Bundle, Ingens Developments, JavaScript, Minification, .NET, Programación, Task Runner

daniel.comas

Written by daniel.comas

Lists by Topic

see all
Servicios gestionados

Categorías

Ver todas