A Visual Studio extension that let's you configure bundling and minification of JS, CSS and HTML files.
Download the extension at the VS Gallery or get the nightly build
- Bundles CSS, JavaScript or HTML files into a single output file
- Saving a source file triggers re-bundling automatically
- MSBuild support for CI scenarios supported
- Minify individual or bundled CSS, JavaScript and HTML files
- Minification options for each language is customizable
- Shows a watermark when opening a generated file
Select 2 or more of the same type of files in Solution Explorer to create a bundle.
Any edits being made to the source files will instantly produce updated bundle file output.
The bundle configuration is stored in a file called bundleconfig.json
which gets added to the root of the project.
Minify any JS, CSS or HTML file by right-clicking it in Solution
Explorer. That will create a <filename>.min.<ext>
and nest
it under the original file.
When the original file is modified, a new min file is produced instantly.
In ASP.NET MVC and WebForms projects you can enable bundling and
minification as part of the build step. Simply right-click the
bundleconfig.json
file to enable it.
Clicking the menu item will prompt you with information about what will happen if you click the OK button.
A NuGet package will be installed into the packages
folder without adding
any files to the project itself. thead NuGet package contains an MSBuild
task that will run the exact same compilers on the bundleconfig.json
file in the root of the project.
Source maps are supported for JavaScript minification only at this time.
A .map
file is produced next to the .min.js
file automatically,
but if you manually delete the .map
file, a new one will not be
created on subsequent minifications.
The extension adds a bundleconfig.json
file at the root of the
project which is used to configure all bundling.
Here's an example of what that file looks like:
[
{
"outputFileName": "output/bundle.css",
"inputFiles": [
"input/file1.css",
"input/file2.css"
],
"minify": {
"enabled": true,
"commentMode": "all"
},
"includeInProject": true,
"sourceMaps": false
},
{
"outputFileName": "output/all.js",
"inputFiles": [
"input/file1.js",
"input/file2.js"
],
"minify": {
"enabled": true,
"termSemicolons": true
},
"includeInProject": true,
"sourceMaps": false
}
]