Javascript Bundling on visual studio 2015

Question

System.Web.Optimization on Visual Studio 2013 was giving us Bundling on javascript files and the best part of that was allowing us to go with individual files or bundle them as we want. it was making debugging a joy now on Visual Studio 2015 we have the grunt and Task Runner, allow me to bundle and minified but switching between bundled js and original files is just pain

is anybody has a solution to use Optimization bundling on VS 2015

Thanks

Answer 1

[Edit] BundlerMinifier Extension can do Bundling and minification as a Visual Studio Extension it has limited capabilities compare to GULP, GRUNT or My favorite WebPack but if you want an easy solution https://github.com/madskristensen/BundlerMinifier is the one

long story short like ecm_dev said old style optimization bundling will not be available this is the right answer, but it wasn't helping me to solve my bundling and minification problem and last a few months it pushed me to find replacements which were actually there Bower, Gulp, Grunt which Microsoft is pushing us to use

I picked the Bower as a package manager Bower is the replacement for nuget on client files (css,js,less etc..) and Gulp as a build task op

gulp-bower Help you to pull Bower packages

main-bower-files Extract Bower files in right locations

gulp-concat bundles your css or js files (any file)

gulp-uglify minify your js files

gulp-less compile your less files

gulp-cssmin minify your css files

gulp-inject inject your css and javascript tags into your .html or .cshtml

Gulp is actually more capable than System.Web.Optimization + Web Essential combine but has lot to learn this may not the answer you are looking for (when I first asked this question a little longer a month ago it definitely wasn't mine)

but if you are looking for this question, you have the same problem I had for

enable gulp on VS 2015 : http://tom.cabanski.com/2014/11/23/using-gulp-with-asp-net-vnext-and-visual-studio-2015-preview/

gulp 101: http://ilikekillnerds.com/2014/07/how-to-basic-tasks-in-gulp-js/

I like to watch video: https://www.youtube.com/watch?v=dwSLFai8ovQ

and here another blog post: http://mmercan.com/blog/?p=271

Answer 2

The old style optimization bundling will not be available in VS2015 for ASP.NET 5.0 applications: https://github.com/aspnet/Home/issues/134

Answer 3

After reading through the documentation and examples provided here, I immediately had the same question. After the bundling and minification steps, the docs just say "Now reference the files".

I did quite a bit of research trying to find a best practice to use for conditionally referencing scripts for development and others for production. The options I like the most are:

1. Use WireDep or gulp-inject to replace placeholder values in your view templates with dynamically defined file references. You can choose different files to include in your gulpfile based on environment and conditionally choose whether to bundle or not. This works great for local files, but isn't so great if you want to use a CDN.
2. Use the environment tag helper to conditionally define file references. This option works great if you want to reference files from a CDN, and gives you the option to switch between local files for development and CDN files for production.

Documentation for WireDep and gulp-inject are provided in their respective links.

To use the environment tag helper, make sure your _GlobalImport view file has the following line in it.

@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

Then use it like this:

<environment names="Development">
    <script src="~/js/script1.js"></script>
    <script src="~/js/script2.js"></script>
    <script src="~/lib/big-script-library.js"></script>
</environment>
<environment names="Staging,Production">
    <script src="~/js/bundle/script.min.js"></script>
    <script src="http://www.some-cdn-resource.com/big-script-library.min.js"></script>
</environment>

The environment names correspond to the ASP.NET 5 environment variable ASPNET_ENV.