Nodejs环境下，请教下grunt-rev和grunt-usemin该如何正确配合起来，使页面静态资源的缓存失效。

Nodejs环境下，请教下grunt-rev和grunt-usemin该如何正确配合起来，使页面静态资源的缓存失效。

如题。求正确的使用范例。感激不尽。

2 回复

在Node.js环境下，grunt-rev 和 grunt-usemin 是两个非常有用的插件，可以帮助你管理静态资源的缓存问题。grunt-rev 主要用于修改文件名以包含哈希值，从而确保浏览器加载最新的资源文件；而 grunt-usemin 则负责解析HTML文件中的构建块，并替换这些构建块中的引用路径，使其指向最新的文件。

步骤1: 安装必要的Grunt插件

首先，你需要安装这两个插件以及它们的依赖项：

npm install grunt-contrib-uglify grunt-contrib-cssmin grunt-rev grunt-usemin --save-dev

步骤2: 配置Gruntfile.js

接下来，需要在你的 Gruntfile.js 中配置这两个插件。以下是一个基本的配置示例：

module.exports = function(grunt) {
    // 项目配置
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // Uglify插件配置
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        },

        // CSS Minify插件配置
        cssmin: {
            options: {
                banner: '/* <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/<%= pkg.name %>.css',
                dest: 'build/<%= pkg.name %>.min.css'
            }
        },

        // Rev插件配置
        rev: {
            options: {},
            files: {
                src: ['build/*.min.*']
            }
        },

        // Usemin插件配置
        useminPrepare: {
            html: 'index.html',
            options: {
                dest: 'dist'
            }
        },

        usemin: {
            html: ['dist/**/*.html']
        }
    });

    // 加载插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-rev');
    grunt.loadNpmTasks('grunt-usemin');

    // 默认任务
    grunt.registerTask('default', [
        'uglify',
        'cssmin',
        'rev',
        'useminPrepare',
        'concat:generated',
        'uglify:generated',
        'cssmin:generated',
        'usemin'
    ]);
};

示例HTML文件

假设你有一个简单的HTML文件 index.html，其中包含对CSS和JS文件的引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <!-- build:css css/main.min.css -->
    <link rel="stylesheet" href="css/main.css">
    <!-- endbuild -->
</head>
<body>
    <script src="js/main.js"></script>
    <!-- build:js js/main.min.js -->
    <script src="js/main.js"></script>
    <!-- endbuild -->
</body>
</html>

当运行上述Grunt任务时，grunt-rev 会修改文件名并添加哈希值，grunt-usemin 会更新HTML文件中的路径，指向新的文件名，从而实现自动更新静态资源引用，解决缓存问题。


在Node.js环境下，grunt-rev 和 grunt-usemin 是两个常用的插件，用于管理静态资源的版本控制及缓存失效问题。grunt-rev 用于给文件名添加哈希值以确保文件被更新时浏览器能够重新加载，而 grunt-usemin 则负责解析HTML文件中的配置，并自动替换引用到这些静态资源。

下面是这两个插件如何正确配合使用的步骤及示例代码：

1. 安装必要的插件

首先需要安装grunt-rev和grunt-usemin，以及其他必要的依赖包：

npm install grunt-rev grunt-usemin --save-dev

同时，你可能还需要安装grunt-contrib-uglify和grunt-contrib-cssmin等，用于压缩你的JavaScript和CSS文件：

npm install grunt-contrib-uglify grunt-contrib-cssmin --save-dev

2. 配置Gruntfile.js

接下来，在你的项目中配置Gruntfile.js，将上述插件的功能整合进去。这里提供一个简单的配置示例：

module.exports = function(grunt) {
    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/<%= pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        },
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            target: {
                files: {
                    'build/styles.min.css': ['src/styles.css']
                }
            }
        },
        useminPrepare: {
            html: 'index.html',
            options: {
                dest: 'dist'
            }
        },
        rev: {
            options: {
                encoding: 'utf8',
                algorithm: 'md5',
                length: 8
            },
            dist: {
                files: {
                    src: ['dist/*.css', 'dist/*.js']
                }
            }
        },
        usemin: {
            html: ['dist/**/*.html'],
            options: {
                assetsDirs: ['dist']
            }
        }
    });

    grunt.registerTask('default', ['uglify', 'cssmin', 'useminPrepare', 'rev', 'usemin']);
};

在这个配置中，uglify和cssmin任务用于压缩源代码，useminPrepare任务用于准备静态资源文件名的替换工作，rev任务生成包含哈希的新文件名，最后usemin任务将HTML文件中的引用更新为新的哈希文件名。

3. HTML文件的配置

为了使grunt-usemin正常工作，你需要在HTML文件中添加特定的注释来标识哪些部分需要被处理。例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- build:css styles.min.css -->
    <link rel="stylesheet" href="styles.css">
    <!-- endbuild -->
</head>
<body>
    <!-- build:js scripts/main.min.js -->
    <script src="scripts/vendor.js"></script>
    <script src="scripts/main.js"></script>
    <!-- endbuild -->
</body>
</html>

通过这样的设置，grunt-usemin可以识别并处理指定的CSS和JS文件，然后用相应的哈希文件名替换它们。

以上就是grunt-rev和grunt-usemin结合使用的基本方法，确保你的静态资源在更新时能够有效地清除浏览器缓存。

回到顶部