asp.net-core-mvcgruntjs.net-6.0grunt-contrib-watch

How to configure grunt file to minify JavaScript and CSS in .NET 6?


I am new to grunt. Can anybody tell me how to configure grunt in .NET 6 MVC project? I want that all the JavaScript files located at "wwwroot\lib\custom\js" folder should get minify and go at this location "wwwroot\js\minified\scripts"

Hierarchy

I do not want to bundle everything into one file rather I am looking to minify these files separately like this:

Files at this location wwwroot\js\minified\scripts will look like below:

product.min.js
common-methods.min.js

I would also like to minify my CSS files and put at this "wwwroot\js\minified\css" location. I found this link helpful but somehow it is not working for me. Also that would be much helpful, if somebody can tell me how to configure "grunt-contrib-watch" as well?

Here is my package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "grunt": "1.5.3",
    "grunt-contrib-clean": "2.0.1",
    "grunt-contrib-jshint": "3.2.0",
    "grunt-contrib-concat": "2.1.0",
    "grunt-contrib-uglify": "5.2.2",
    "grunt-contrib-watch": "1.1.0"
  }
}

and my gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),

        uglify: {
            options: {
                compress: true
            },             
        }
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask("default", ["uglify"]);   
   
}

Can anybody help me configure this?


Solution

  • Your gruntfile.js will look this

    module.exports = function (grunt) {
        grunt.initConfig({
            pkg: grunt.file.readJSON("package.json"),
    
            uglify: {                
                minifyJs: {
                    files: [{
                        expand: true,
                        cwd: 'wwwroot/lib/custom/js/',
                        src: ['**/*.js'],
                        dest: 'wwwroot/js/minified/scripts/',
                        ext: '.min.js',
                        extDot: 'first'
                    },],
                },
            },
    
            cssmin: {               
                webStyles: {
                    files: [{
                        expand: true,
                        cwd: 'wwwroot/lib/custom/css/',
                        src: ['**/*.css'],
                        dest: 'wwwroot/js/minified/css/',
                        ext: '.min.css'
                    }]
                }
            },
            watch: {
                minifyJs: {
                    expand: true,
                    files: "wwwroot/lib/custom/js/**/*.js",
                    tasks: ["uglify:minifyJs"]
                },
                webStyles: {
                    expand: true,
                    files: "wwwroot/lib/custom/css/**/*.css",
                    tasks: ["cssmin:webStyles"]
                },
    
                options: {
                    spawn: false,
                    event: ['all']
                }
            }
        });
    
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-watch');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
    
        grunt.registerTask("default", ["watch"]);       
    }
    

    You can refer the documentation for more information.