Gulp Rev 在我的清单文件中不包含路径

Question

我设置了Gulp任务，可以同时连接、缩小和指纹资产，并将它们直接写入我的资产文件夹：

（css部分）

gulp.task('styles:cssmin', function(){
    return gulp.src('src/css/*.css')
        .pipe(concat('main.css')) // combine them
        .pipe(cssmin()) // minify them
        .pipe(rev()) // Pipe through gulp-rev to fingerprint generated file
        .pipe(gulp.dest('assets/css'))  // write rev'd assets 
        .pipe(rev.manifest({
            merge: true // Merge because this happens for .js and images too
        }))
        .pipe(gulp.dest('./')); // write manifest
});

这会对文件进行指纹识别并生成清单，但我无法获得任何保存到清单文件的路径。这是它生成的清单：

{
  "bg.jpg": "bg-447ac2238b.jpg",
  "logo.png": "logo-e31e139d4d.png",
  "main-min.js": "main-min-cc3a682299.js",
  "main.css": "main-ea0d06582f.css",
  "main.js": "main-35ec0bb3c8.js"
}

我想要的是：

{
  "assets/img/bg.jpg": "assets/img/bg-447ac2238b.jpg",
  "assets/img/logo.png": "assets/img/logo-e31e139d4d.png",
  "assets/js/main-min.js": "assets/js/main-min-cc3a682299.js",
  "assets/css/main.css": "assets/css/main-ea0d06582f.css",
  "assets/jsg/main.js": "assets/js/main-35ec0bb3c8.js"
}

特别是考虑到文档给出了一个例子，其中包括相对路径

Answer 1

我也遇到了同样的问题，最终将流中的资产目录重命名为我想要的，并指定了rev清单的路径。

var rename = require("gulp-rename");
gulp.task('styles:cssmin', function(){
    return gulp.src('src/css/*.css')
        .pipe(concat('main.css')) // combine them
        .pipe(cssmin()) // minify them
        .pipe(rename({
            dirname: "assets/css" //manually fixing path for rev-manifest
        }))
        .pipe(rev('path/to/your/rev/rev-manifest.json')) // Specify manifest location
        .pipe(gulp.dest('assets/css'))  // write rev'd assets 
        .pipe(rev.manifest({
            merge: true // Merge because this happens for .js and images too
        }))
        .pipe(gulp.dest('./')); // write manifest
});

Answer 2

我最终不得不编辑源代码。里面有注释，很抱歉我不能突出显示。

plugin.manifest = function (pth, opts) {
    if (typeof pth === 'string') {
        pth = {path: pth};
    }
    opts = objectAssign({
        path: 'rev-manifest.json',
        merge: false
    }, opts, pth);
    // Changed the following line to the next line:
    // var firstFileBase = null
    var firstFileBase = opts.base || null;
    var manifest = {};
    return through.obj(function (file, enc, cb) {
        // ignore all non-rev'd files
        if (!file.path || !file.revOrigPath) {
            cb();
            return;
        }
        firstFileBase = firstFileBase || file.base;
        var revisionedFile = relPath(firstFileBase, file.path);
        var originalFile = path.join(path.dirname(revisionedFile), path.basename(file.revOrigPath)).replace(/\/g, '/');
        manifest[originalFile] = revisionedFile;
        cb();
    }, function (cb) {
        // no need to write a manifest file if there's nothing to manifest
        if (Object.keys(manifest).length === 0) {
            cb();
            return;
        }
        getManifestFile(opts, function (err, manifestFile) {
            if (err) {
                cb(err);
                return;
            }
            if (opts.merge && !manifestFile.isNull()) {
                var oldManifest = {};
                try {
                    oldManifest = JSON.parse(manifestFile.contents.toString());
                } catch (err) {}
                manifest = objectAssign(oldManifest, manifest);
            }
            manifestFile.contents = new Buffer(JSON.stringify(sortKeys(manifest), null, '  '));
            this.push(manifestFile);
            cb();
        }.bind(this));
    });
};

不是一个理想的解决方案，将在更新时中断。如果有更好的方法，我会很高兴的。

Answer 3

正确的答案是老的。但我还是从中明白了。对于新版本的插件，它必须略有不同。顺便说一下，我正在Symfony v6中使用它。

const paths = {
    styles: {
        src: '../assets/site/scss/**/*.scss',
        dest: '../public/site/css/'
    },
    scripts: {
        src: '../assets/site/lib/*.js',
        dest: '../public/site/js/'
    },
    revision: {
        manifest: '../assets/site/rev-manifest.json',
        dest_manifest: '../assets/site/',
        dest: '../public/site/'
    },
    templates: {
        src: '../templates/site/**/*.html.twig'
    }
};
  export function styles() {
    return gulp.src(paths.styles.src, {base: '../assets'})
            .pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
            .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
            .pipe(concat('main.css'))
            .pipe(gulp.dest(paths.styles.dest))
            .pipe(rename({dirname: "css"}))
            .pipe(rev())
            .pipe(gulp.dest(paths.revision.dest))
            .pipe(rev.manifest(paths.revision.manifest, {
                base: paths.revision.dest_manifest,
                merge: true
            }))
            .pipe(gulp.dest(paths.revision.dest_manifest))
            .pipe(livereload());
}

我的依赖项：

"devDependencies": {
        "del": "^7.0.0",
        "gulp": "^4.0.2",
        "gulp-autoprefixer": "^8.0.0",
        "gulp-concat": "^2.6.1",
        "gulp-livereload": "^4.0.2",
        "gulp-rename": "^2.0.0",
        "gulp-rev": "^10.0.0",
        "gulp-sass": "^5.1.0",
        "gulp-sourcemaps": "^3.0.0",
        "gulp-uglify": "^3.0.2",
        "sass": "^1.58.0"
    },
    "dependencies": {
        "bootstrap": "^5.2.3"
    }