gulp-rev 项目使用教程

gulp-rev 项目使用教程

gulp-revStatic asset revisioning by appending content hash to filenames: `unicorn.css` → `unicorn-d41d8cd98f.css`项目地址:https://gitcode.com/gh_mirrors/gu/gulp-rev

1. 项目的目录结构及介绍

gulp-rev 项目的目录结构如下：

gulp-rev/
├── examples/
│   └── basic/
│       ├── gulpfile.js
│       ├── package.json
│       └── src/
├── lib/
│   ├── index.js
│   └── manifest.js
├── node_modules/
├── test/
│   ├── index.js
│   └── manifest.js
├── .editorconfig
├── .eslintrc
├── .gitattributes
├── .gitignore
├── .npmignore
├── .travis.yml
├── gulpfile.js
├── index.js
├── license
├── package.json
└── readme.md

目录介绍

• examples/: 包含一些示例项目，展示如何使用 gulp-rev。
• lib/: 包含 gulp-rev 的核心代码。
• node_modules/: 存放项目依赖的第三方模块。
• test/: 包含项目的测试文件。
• .editorconfig, .eslintrc, .gitattributes, .gitignore, .npmignore, .travis.yml: 项目配置文件。
• gulpfile.js: 项目的 gulp 配置文件。
• index.js: 项目的入口文件。
• license: 项目的许可证文件。
• package.json: 项目的 npm 配置文件。
• readme.md: 项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件是 gulpfile.js，它定义了如何使用 gulp-rev 插件来处理静态文件。以下是一个基本的 gulpfile.js 示例：

const gulp = require('gulp');
const rev = require('gulp-rev');

gulp.task('default', () => {
    return gulp.src('src/*.css')
        .pipe(rev())
        .pipe(gulp.dest('dist'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist'));
});

启动文件介绍

• gulp.task('default', ...): 定义了一个默认任务，当运行 gulp 命令时会执行这个任务。
• gulp.src('src/*.css'): 选择 src 目录下的所有 CSS 文件。
• pipe(rev()): 使用 gulp-rev 插件为这些文件添加 hash 后缀。
• pipe(gulp.dest('dist')): 将处理后的文件输出到 dist 目录。
• pipe(rev.manifest()): 生成一个 manifest 文件，记录原始文件名和添加 hash 后文件名的映射关系。
• pipe(gulp.dest('dist')): 将 manifest 文件输出到 dist 目录。

3. 项目的配置文件介绍

项目的配置文件主要包括 package.json 和 gulpfile.js。

package.json

package.json 文件包含了项目的元数据和依赖信息。以下是一个简化的示例：

{
  "name": "gulp-rev",
  "version": "9.0.0",
  "description": "Static asset revisioning by appending content hash to filenames: unicorn.css => unicorn-d41d8cd98f.css",
  "main": "index.js",
  "scripts": {
    "test": "xo && ava"
  },
  "keywords": [
    "gulpplugin",
    "rev",
    "revision",
    "hash",
    "optimize",
    "version",
    "versioning",
    "cache",
    "expire",
    "static",
    "asset",
    "assets",
    "web"
  ],
  "author": "Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)",
  "license": "MIT",
  "dependencies": {
    "gulp-util": "^3.0.8",
    "through2": "^2.0.3",
    "rev-hash": "^3.0.0",
    "rev-path": "^2.0.0",
    "vinyl-file": "^3.0.0",
    "vinyl-paths": "^3.0.0",
    "write-json-file": "^3

gulp-revStatic asset revisioning by appending content hash to filenames: `unicorn.css` → `unicorn-d41d8cd98f.css`项目地址:https://gitcode.com/gh_mirrors/gu/gulp-rev