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:
- 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.
-
In the current folder (the root folder of your custom MVC widget), create a new filecalled gruntfile.js with the following contents:
- In the current folder create a new file called package.json witht he following contents:
- Open the Command Prompt, navigate to the root folder of your custom MVC widget and run the following commands:
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.