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

Question

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"

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?

Answer 1

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.