使用教程：ElemeFE/grunt-rev 模块化版本号管理

使用教程：ElemeFE/grunt-rev 模块化版本号管理

grunt-revAsset revving for Grunt.js项目地址:https://gitcode.com/gh_mirrors/gr/grunt-rev

1. 项目目录结构及介绍

在 ElemeFE/grunt-rev 中，项目的主要目录结构通常如下：

.
├── Gruntfile.js    # 配置文件，用于定义任务和插件
├── package.json   # 项目依赖管理文件，列出所有 NPM 包
├── src             # 开发源代码目录
│   ├── assets      # 资源文件（例如 CSS、JS 文件）
│   └── views       # HTML 视图文件
└── dist            # 构建后的发布目录，包括修订版资源

• Gruntfile.js：该项目的核心配置文件，用于定义如何处理源代码。
• package.json：包含了项目的信息以及开发所需的依赖包列表。
• src：源代码目录，原始未处理的资产和视图文件存放在这里。
  • assets：存储静态资源文件，如 CSS 和 JavaScript。
  • views：HTML 文件或其他模板引擎文件，可能包含对资源的引用。
• dist：构建目标目录，经过处理和修订后的资源将被放到这里。

2. 项目的启动文件介绍

项目的启动主要通过运行 grunt 命令来完成。在命令行中，导航到项目根目录并执行以下操作：

npm install         # 安装项目依赖
grunt                # 运行默认任务，包含资源修订和复制

npm install 是用来安装 package.json 文件中列明的所有依赖包，确保你有最新的 grunt 及其相关插件。grunt 命令则会执行在 Gruntfile.js 中定义的任务。

在 Gruntfile.js 中，你可以看到类似以下的代码片段，这定义了如何使用 grunt-rev 插件：

module.exports = function(grunt) {
  grunt.initConfig({
    // ...其他配置
    rev: {
      options: {}, 
      files: {
        src: ['src/assets/**/*.{png,jpg,gif,css,js}'] // 要修订的文件路径
      }
    },
    useminPrepare: {
      html: 'src/index.html', // 输入文件
      options: {
        dest: 'dist' // 输出目录
      }
    },
    usemin: {
      html: ['dist/**/*.html'], // 输入文件
      css: ['dist/**/*.css'],
      options: { dirs: ['dist'] } // 处理的目录
    }
    // ...其他配置
  });

  grunt.loadNpmTasks('grunt-contrib-rev');
  grunt.loadNpmTasks('grunt-usemin');

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

这段代码定义了一个名为 default 的任务，它依次执行资源修订 (rev)、Usemin 准备 (useminPrepare)、文件合并 (concat)、JavaScript 压缩 (uglify) 和 Usemin 更新引用 (usemin)。

3. 项目的配置文件介绍

Gruntfile.js

Gruntfile.js 是项目的配置文件，其中定义了 Grunt 使用的所有插件及其配置。例如，在上面的例子中，我们配置了两个主要插件：grunt-rev 和 grunt-usemin。

grunt-rev 部分指定了要进行版本号修订的文件类型和路径，这有助于缓存策略更新：

rev: {
  options: {}, 
  files: {
    src: ['src/assets/**/*.{png,jpg,gif,css,js}']
  }
}

grunt-usemin 则用于自动更新 HTML 中引用资源的路径，以便指向修订后的文件：

useminPrepare: {
  html: 'src/index.html',
  options: {
    dest: 'dist'
  }
},
usemin: {
  html: ['dist/**/*.html'],
  css: ['dist/**/*.css'],
  options: { dirs: ['dist'] }
}

useminPrepare 设置输入文件，usemin 设置处理后的文件，并指定处理哪些目录。

在实际项目中，可以根据需求调整这些配置，以适应不同的资源管理和构建流程。

grunt-revAsset revving for Grunt.js项目地址:https://gitcode.com/gh_mirrors/gr/grunt-rev