javascript - 在 Gulp 任务中获取相对源/目标

Question

假设我在 /Users/me/app/src/scripts/foo.js 有一个文件。我设置了一个 gulp 任务，将此文件写入 /Users/me/app/dist/scripts/foo.js:

gulp.src('src/scripts/foo.js', base: 'src')
.pipe(...)
.pipe(gulp.dest('dist'))

我正在编写一个简单的插件，需要了解 scripts/foo.js。我原以为 file.relative 是这个部分路径，但它提供了 foo.js。我看不到从 file.path、file.cwd、 的任意组合中获取 scripts/foo.js 的方法file.base 等

如何获取我需要的路径部分？

Answer 1

假设你想要相对于你指定的基的路径，你会想使用像节点的路径模块这样的东西来做提取:

var path = require('path');
// this is how you get the relative path from a vinyl file instance
path.relative(path.join(file.cwd, file.base), file.path);

这是使用您的示例的 gulpfile 示例:

var path = require('path'),
    gulp = require('gulp'),
    through = require('through2');

function parsePath() {
    return through.obj(function (file, enc, cb) {
        console.log(file.base);
        console.log(file.cwd);
        console.log(file.path);
        console.log(path.relative(path.join(file.cwd, file.base), file.path))
        cb();
    });
}

gulp.task('default', function () {
    gulp.src('src/scripts/foo.js', { base: 'src'})
        .pipe(parsePath())
        .pipe(gulp.dest('dist'));
});

这是我运行这个 gulpfile 时的输出:

src
/Volumes/Data/Project/sandbox/gulp-ex
/Volumes/Data/Project/sandbox/gulp-ex/src/scripts/foo.js
scripts/foo.js

这是项目文件夹结构

gulp-ex/
    |_ gulpfile.js
    |_ src/scripts/foo.js
    |_ dist