Sitecore - Contextual menus

Sitecore 10.2 - Solution for bundling ES6+ Javascript with web.optimization in Asp.net MVC

  One of the issues which I have faced in recent days while bundling using web optimization in the Sitecore MVC project.

  When we are using Asp.net MVC application, system.Web.Optimization does not support ES6 javascript files bundling and minification hence I have used BuildBundlerMinifier to minify it.

 For base bundling using web.optimization, you can refer to this below blog

   Bundling and minification in Sitecore MVC - a good post by Himanshu Agarwal

  Post the base solution set up please follow the below steps to bundle ES6+ javascript files

• Install the BuildBundlerMinifier NuGet package for your project.

         

• Add a package.json file, with the following devDependencies, to the root of your project

                                 

• Run the following npm commands inside the project root

           

• Add the gulpfile.js and bundleconfig.json files to the project root ( GitHub - ScBundling -https://github.com/SriramGayathri/ScBundling)

         

• Inside the .csproj file of the project add the following build task

                        <Target Name="MyPreCompileTarget" BeforeTargets="Build">

                                <Exec Command="gulp min" />

                       </Target>

                     

          

• On building the Foundation project js and css files will be minified:

                

• Inside the BundleConfig.cs do the following:

           

• Add the below snippets in the view:

                           

Now let's see the outcome of the bundling and minification in the application

        

  

  

For more do check out in the repo -> GitHub project SCBundling

Happy Sitecoring :)