Declarations
Define your bundles during startup:
services.UseSmidge(bundles =>
{
//Defining using JavaScriptFile's or CssFile's:
bundles.Create("test-bundle-1", //bundle name
new JavaScriptFile("~/Js/Bundle1/a1.js"),
new JavaScriptFile("~/Js/Bundle1/a2.js"));
//Or defining using file/folder paths (also supports file globbing patterns):
bundles.Create("test-bundle-2", WebFileType.Js,
"~/Js/Bundle2", "~/Js/OtherFolder/*.js");
//Then there's all sorts of options for configuring bundles with regards to customizing their
//individual pipelines, customizing how rendering is done based on Debug or Production environments,
//if you want to enable file watchers, configure custom cache busters or the
//cache control options, etc... There's even a fluent API to do this! Example:
bundles.Create("test-bundle-3", WebFileType.Js, "~/Js/Bundle3")
.WithEnvironmentOptions(BundleEnvironmentOptions.Create()
.ForDebug(builder => builder
.EnableCompositeProcessing()
.EnableFileWatcher()
.SetCacheBusterType<AppDomainLifetimeCacheBuster>()
.CacheControlOptions(enableEtag: false, cacheControlMaxAge: 0))
//You could also do .ForProduction here too!
.Build()
});There are quite a few overloads and options for creating bundles.
If you don't want to create named bundles and just want to declare dependencies individually, you can do that too and Smidge will generate the URLs for these dependencies (they are essentially runtime bundles)
Require multiple files
@{ Smidge.RequiresJs("~/Js/test1.js", "~/Js/test2.js"); }Require a folder - optionally you can also include filters/file globbing patterns (i.e. this includes all .js files)
@{ Smidge.RequiresJs("~/Js/Stuff/*.js"); }Chaining:
@{ Smidge
//external resources work too!
.RequiresJs("//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js")
.RequiresJs("~/Js/Folder/*.js")
.RequiresCss("~/Css/test1.css", "~/Css/test2.css", "~/Css/test3.css", "~/Css/test4.css");
}You can create/declare bundles inline in your views too using this syntax:
JS Bundle:
@{ SmidgeHelper
.CreateJsBundle("my-awesome-js-bundle")
.RequiresJs("~/Js/test1.js", "~/Js/test2.js")
.RequiresJs("~/Js/Folder/*.js");
}CSS Bundle:
@{ SmidgeHelper
.CreateCssBundle("my-cool-css-bundle")
.RequiresCss("~/Css/test1.css", "~/Css/test2.css", "~/Css/test3.css");
}If you need to order your dependencies in a custom way, you can do this both by using an Order parameter on your assets, or via code with a callback method.
You can supply an Order property to any IWebFile, the default is zero and it cannot be less than zero. If you assign an Order then it will be taken into account before the collection of files is processed.
For a more dynamic approach when using bundles, you can assign a callback. So you bundle definition could look something like:
bundles.Create("test-bundle-1",
new JavaScriptFile("~/Js/Folder/*.js"),
new JavaScriptFile("~/Js/Bundle1/a2.js"))
.OnOrdering(collection =>
{
//return some custom ordering
return collection.OrderBy(x => x.FilePath);
});