If you are using jQuery for your site, it is possible that eventually your page header section may look like this:
Through this post, I just want to highlight some of the small things I have to do to eventually get it working (and it has been working awesomely).
- Add a refence to Bundler.Framework.dll
- For the code to actually create a single js file (or css), you will need to make sure that your site's compilation is configure to NOT debug. You can do this in web.config, or else your js files will just be listed on one by one instead of being combined:
<compilation debug="false" targetFramework="4.0">
- Bundler also provide options to compress your css and also to minify your js with different minifiers.
<% Response.Write( Bundler.Framework.Bundle.Css() .Add("~/stylesheets/ui.all.css") .Add("~/stylesheets/admin.css") .Add("~/stylesheets/maincontent.css") .WithCompressor(Bundler.Framework.Css.Compressors.CssCompressors.YuiCompressor) .RenderOnlyIfOutputFileMissing() .Render("/JJCMS/Content/Stylesheets/combined.css") ); %> <compilation debug="false" targetFramework="4.0">
- Bundler also provide options to only render combined js or css file if the rendered file is non-existent. You use the "RenderOnlyIfOutputFileMissing" option. See code above for example.
So now, with Bundler, your js and css will be rendered like this: