How to perform bundling and minification of Javascript and CSS files kept in sitecore/media library path.
-
2Is 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.– Vlad IobagiuCommented Mar 13, 2018 at 19:54
-
editors dont have access to Javascript and CSS items.– SiddharthCommented Mar 13, 2018 at 19:56
-
Do you want to bundle/minify before uploading to the media library or after?– George ChangCommented Mar 14, 2018 at 2:27
-
After, while creating a webpage. However how can I bundle before uploading ?– SiddharthCommented Mar 14, 2018 at 7:36
2 Answers
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
- Install Web Essential in Visual studio.
- After this open repo and add your file over there.
- Right click on js/css file you will get option from web essential to minify the files.
- 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.
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"))