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 indiv

Answer 1

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 2

[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 3

Prior to Web Essentials 2015 Bundler and Minifier were both included in the core plugin. With Web Essentials 2015 that is no longer the case and have been seperated into its own plugin (Plugin on Visal Studio Marketplace)

Also to note, transitioning to the new plugin has you utilizing a bundleconfig.json file on the root of your project in lieu of the individual .bundle configuration files.

Answer 4

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.

Answer 5

After I complain for a whole day to Visual Studio 2015 for moving my cheese, I calmed down and just when ahead to find out how to do it the new way, I now I back to loving vs2015 :)

If you already had all your files configured, don't worry do not delete your existing configuration we will use it

1. Install Web Essentials for 2115
2. Select the files you want to bundle, if you already had the files configured and are too many only select a couple we can edit the config later
3. right-click and select "Bundle and Minifier" - "Bundle and Minify Files" (Shift-Alt-F)
4. Save the bundled in your prefeer location (maybe with a different name from the previous one, so you don't override it)
5. the first difference is that you will not see yourfile.js.bundle. Instead there is a new bundleconfig.json at your root folder
6. if you open the file you can see now you can have only one config file for all your bundles
7. Now you can copy your existing configuration from yourfile.bundle which is XML and that's ok
8. Paste into the new bundleconfig.json and just remove all the <file> </file> tags

and that's it... your new config is now setup

you can get more info about the new bundler here

https://visualstudiogallery.msdn.microsoft.com/9ec27da7-e24b-4d56-8064-fd7e88ac1c40