3

How to perform bundling and minification of Javascript and CSS files kept in sitecore/media library path.

4
  • 2
    Is not recommended to keep Javascript and Css files into Media Library. If you add them into Media Library editors will have possibility to edit them and you will have many issues. Commented Mar 13, 2018 at 19:54
  • editors dont have access to Javascript and CSS items.
    – Siddharth
    Commented Mar 13, 2018 at 19:56
  • Do you want to bundle/minify before uploading to the media library or after? Commented Mar 14, 2018 at 2:27
  • After, while creating a webpage. However how can I bundle before uploading ?
    – Siddharth
    Commented Mar 14, 2018 at 7:36

2 Answers 2

1

Way 1: Use Module

I can see this is an unconventional way to keep static files in Media Library but you can try below module if it can help as it performs magnification/bundling of js/css code added in item under nodes you need follow steps written in documentation.

https://marketplace.sitecore.net/en/Modules/S/Sitecore_Bundler.aspx

Way 2: You can minify files from your repo

  1. Install Web Essential in Visual studio.
  2. After this open repo and add your file over there.
  3. Right click on js/css file you will get option from web essential to minify the files.
  4. Then you can upload file in Media library.

You can also add configuration given from below link to web.config file to improve the performance.

https://stackoverflow.com/questions/29373297/azure-website-slow-to-serve-static-js-css-but-not-binary

1

However it is not recommended to keep your css and js files in sitecore media library but as you have already decided then you could use SquishIt libraries to bundle and minimize your css and js:

Link : https://www.nuget.org/packages/SquishIt

Sample code you need to write in your view file:

    @using SquishIt.Framework;

    @Html.Raw(SquishIt.Framework.Bundle.JavaScript()
.Add("/~/media/Sample1.js")
.Add("/~/media/Sample2.js").ForceRelease().Render("~/myscripts/combined_#.js"))                                            

    @Html.Raw(SquishIt.Framework.Bundle.Css()
.Add("/~/media/Sample1.css")
.Add("/~/media/Sample2.css").ForceRelease().Render("~/mycss/combined_#.css"))

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.