Create minified versions of custom widgets scripts

PREREQUISITES: Before you proceed with this tutorial, ensure you have configured your environment to run Grunt:
  • Install Node.js. For more information see: NodeJS download.
  • Install the grunt CLI by runing npm install -g grunt-cli in your Command Prompt. For more information see: GruntJS Getting Started.
When you develop your custom MVC widgets you can benefit from Sitefinity's ability to automatically load a minified version of a script, if one is found in the folder, where the script is referenced. To produce a minified version of your scripts, follow these steps:
  1. Navigate to the folder where your custom MVC widget is placed. Once you coplmete the below steps, a minified version of all all JavaScript files in the curren tfolder will be created in a new folder  [current folder]/MVC .

    NOTE: You do not need to minify JavaScript files that start with DesinerView since they are related to the Sitefinity backend.

  2. In the current folder (the root folder of your custom MVC widget), create a new filecalled gruntfile.js with the following contents:

  3. In the current folder create a new file called package.json witht he following contents:
  4. Open the Command Prompt, navigate to the root folder of your custom MVC widget and run the following commands:
    • npm install
    • grunt

RESULT:As a result, in your custom MVC widget root folder, next to your existing JavaScript files, you will notice the new minified script files, containing a minified version of the JavaScript and a source map. The files follow the same naming convention as your original files, plus the min.js extension. 

NOTE: If the initial JavaScript files are a part of an assembly, do not forget to include the newly produced minified files and source maps in your project and embed them. 

 

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?