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 DesinerViewsince 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:

   JavaScript

   module.exports = function(grunt) {
       'use strict';
   
       //Project Configuration
       grunt.initConfig({
   
           pkg: grunt.file.readJSON('package.json'),
           uglify: {
               options: {
                   sourceMap: true,
                   sourceMapIncludeSources: true
               },
               minify: {
                   files: grunt.file.expandMapping(['MVC/**/*.js',
                       '!MVC/**/designerview-*.js',
                       '!MVC/**/*.min.js'
                   ], './', {
                       rename: function(destBase, destPath) {
                           return destBase + destPath.replace('.js', '.min.js');
                       }
                   })
               }
           }
       });
   
       //Load the needed plugins
       grunt.loadNpmTasks("grunt-contrib-uglify");
   
       //Default task(s)
       grunt.registerTask('default', ['uglify']);
   };

3. In the current folder create a new file called package.json witht he following contents:

   JSON

   {
       "devDependencies": {
           "grunt": "^0.4.5",
           "grunt-contrib-uglify": "^4.0.1"
       }
   }

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.