如何使用 gulp.src() 获取相对来源

Question

我在 /components/slider/index.html 有一个文件。我设置了一个 gulp 任务，使用 gulp-inject.

从单独的文件夹中注入相关的 css/js 文件

gulp.task('default', function() {

    return gulp.src('./components/**/*.html')
    .pipe( inject(gulp.src(['./assets/css/bootstrap/*.css'], {read: false}), { relative: true }) )
    .pipe( inject(gulp.src(['./assets/js/jquery/*.js'], {read: false}), {starttag: '<!-- inject:head:{{ext}} -->', relative: true} ) )
    .pipe(gulp.dest('./dist'));

});

现在我需要获取一个 js 文件的源代码，它位于我们正在管道传输的 html 源代码旁边，以便使用 gulp-inject 相对注入它。

有没有办法在管道中获取 gulp.src('./components/**/*.html') 并以某种方式从那里获取同级 js 文件？有什么建议吗？

Answer 1

事实证明，使用 gulp-inject 无法做到这一点，所以我所做的是获取目录路径列表，然后分别对每个路径执行 gulp-inject .

这样我什至在开始注入之前就可以访问所有文件夹和文件路径。

var fs = require('fs');
var dirPath = '/components/widgets/';
var result = [];  //this is going to contain paths

fs.readdir(__dirname + dirPath, function (err, filesPath) {
    if (err) throw err;
    result = filesPath.map(function (filePath) {
        return dirPath + filePath;
    });

    function do_inject(entry) {
        // Injection Code using gulp-inject
    }

    result.forEach(function(entry) {
        do_inject(entry);
    });

});

另外，我最终使用了 "addPrefix" 和 "addRootSlash" 选项用于我的 gulp-inject 以使其按照我想要的方式运行。只是一些额外的信息，它可能会对某人有所帮助。

如何使用 gulp.src() 获取相对来源

How to get relative source using gulp.src()

javascript

node.js

gulp

gulp-inject