29

I am building a web application for mobile using visual studio, and I wanted to know how do I minify all my CSS files into one file, and also all my JavaScript to one minified file.

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
Bergerova
  • 863
  • 3
  • 10
  • 21

4 Answers4

28

You can use the Visual Studio 2015 Bundler & Minifier,extention https://visualstudiogallery.msdn.microsoft.com/9ec27da7-e24b-4d56-8064-fd7e88ac1c40 this used to be apart of Web Essentials in previous versions of Visual Studio, but was separated, into it's own extension.

Dwain Browne
  • 792
  • 7
  • 12
  • 3
    Is there any documentation for this extension? I've been trying (and getting very frustrated with) the syntax for the bundleconfig-schema.json. I find it hard to believe that I have to add each javascript file manually to this file, but that's what it looks like. – Jonathan Oct 21 '15 at 11:13
  • @Jonathan Had the same question. Looks like it does support globbing patterns https://github.com/madskristensen/bundlerMinifier#bundleconfigjson #greatsuccess – Polshgiant Feb 11 '16 at 16:43
  • 3
    There was a time I would have recommended this extension (VS2013) - but the 2015 is hot mess. It's prone to crashing VS if the LESS/JS files are too large, and the bundle/compile configs get confused (not to mention with his updates, out of sync) - where it doesn't minify like it should anymore - and removes options to do so (right now i have a JS I can't minify for whatever reason). This extension needs serious work before it's production ready. – Jason Oct 15 '16 at 18:30
  • Have had nothing but trouble trying to use this extension, crashing VS continually. – Simon Jan 24 '17 at 19:06
7

The below link explains a lot better http://blogs.msdn.com/b/rickandy/archive/2012/08/15/adding-web-optimization-to-a-web-pages-site.aspx

http://www.asp.net/mvc/overview/performance/bundling-and-minification

Deepak Rajappan
  • 155
  • 5
1

It's handled in the bundleconfig.json for asp.net mvc core

Here is full article: https://learn.microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification?view=aspnetcore-2.1&tabs=visual-studio%2Caspnetcore2x

Ozan BAYRAM
  • 2,780
  • 1
  • 28
  • 35
1

Both extensions mentioned in other answers seem abandoned, but the good thing, Visual Studio has built-on support for npm and Grunt/Gulp tasks - that can "watch" a file, and minify/compile JS, CSS, SASS and everything else you have in your project.

  1. Drop a package.json into your project root folder, with Grunt or Gulp added there. Visual Studio will "detect" it and install all the npm packages in the background.
  2. Add Gruntfile.js (or Gulpfile if you prefer Gulp) and Visual Studio "task runner" will also detect it automatically.
  3. Edit Gruntfile (or Gulpfile) to minify/compile your files (tons of info can be found online) and optinally add a "watcher" too.
  4. Under "View - Other Windows - Task Runner" configure these tasks to run on project open.

I wrote a detailed blog post with screenshots and everything, since it can be overwhelming for VS/.NET people to get familiar with npm/grunt/gulp/npm-scripts at first, but it's easy, trust me! I've been there myself.

Alex from Jitbit
  • 53,710
  • 19
  • 160
  • 149