如何在.NET 6 MVC项目中配置Grunt单独压缩JS、CSS及watch？

1. 更新package.json #

需要添加grunt-contrib-cssmin依赖来处理CSS压缩，更新后的配置如下：

{
  "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",
    "grunt-contrib-cssmin": "4.0.0"
  }
}

2. 完善gruntfile.js配置 #

以下配置实现了单个JS文件压缩、CSS文件压缩，以及文件变化监听功能：

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

        // 单独压缩每个JS文件，输出到指定目录并添加.min后缀
        uglify: {
            options: {
                compress: true,
                preserveComments: 'some' // 可选：保留部分注释，不需要可删除
            },
            individual: {
                files: [{
                    expand: true,
                    cwd: 'wwwroot/lib/custom/js/', // JS源文件根目录
                    src: ['*.js'], // 匹配所有JS文件
                    dest: 'wwwroot/js/minified/scripts/', // 压缩后输出目录
                    ext: '.min.js' // 输出文件后缀
                }]
            }
        },

        // 单独压缩每个CSS文件，输出到指定目录并添加.min后缀
        cssmin: {
            options: {
                mergeIntoShorthands: false,
                roundingPrecision: -1
            },
            individual: {
                files: [{
                    expand: true,
                    cwd: 'wwwroot/lib/custom/css/', // CSS源文件根目录，可根据实际路径调整
                    src: ['*.css'], // 匹配所有CSS文件
                    dest: 'wwwroot/js/minified/css/', // 压缩后输出目录
                    ext: '.min.css' // 输出文件后缀
                }]
            }
        },

        // 监听文件变化，自动执行对应压缩任务
        watch: {
            scripts: {
                files: ['wwwroot/lib/custom/js/*.js'],
                tasks: ['uglify'],
                options: {
                    spawn: false,
                    livereload: true // 可选：开启自动刷新，需配合浏览器livereload插件
                }
            },
            styles: {
                files: ['wwwroot/lib/custom/css/*.css'],
                tasks: ['cssmin'],
                options: {
                    spawn: false,
                    livereload: true
                }
            }
        }
    });

    // 加载所需Grunt任务
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // 注册默认任务：执行JS和CSS压缩
    grunt.registerTask("default", ["uglify", "cssmin"]);
    // 注册监听任务：启动文件监听
    grunt.registerTask("startwatch", ["watch"]);
}

3. 使用步骤 #

• 安装依赖：在项目根目录执行npm install
• 手动执行压缩：运行grunt命令，一次性完成所有JS和CSS的压缩
• 启动自动监听：运行grunt startwatch，当源目录的JS或CSS文件修改时，自动触发对应压缩任务

注意：如果你的CSS源文件路径不是wwwroot/lib/custom/css/，请修改cssmin配置中的cwd参数为实际路径。

内容的提问来源于stack exchange，提问作者Shaksham Singh