Javascript Gulp src文件顺序

我的目录中的文件：

1-icon.svg
2-icon.svg
3-icon.svg
10-icon.svg
11-icon.svg
12-icon.svg
20-icon.svg
21-icon.svg
22-icon.svg

Gulp src将其解读为：

1-icon.svg
10-icon.svg
11-icon.svg
12-icon.svg
2-icon.svg
20-icon.svg
21-icon.svg
22-icon.svg
3-icon.svg

我试过gulp sort和gulp order，但没有一个能给我像我的目录一样的文件的确切顺序

---

有什么方法可以做到这一点吗？

是的，可以按与字符串相同的顺序来点菜。要管理订单，您可以使用

gulpsort

plugin。这里有一个例子，我已经做了

const gulp = require('gulp'),
    debug = require('gulp-debug'),
    sort = require('gulp-sort'),
    path = require('path');

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

    return gulp.src('./test/*')
        .pipe(debug())
        .pipe(sort(customComparator))
        .pipe(debug())
        .pipe(gulp.dest('./dist'));

});

function customComparator(f1, f2) {
    const f1Name = path.basename(f1.path);
    const f2Name = path.basename(f2.path);
    return Number(f1Name.split('-')[0]) > Number(f2Name.split('-')[0]) ? 1 : -1;
}

看看

customComparator

函数，它获取文件名的第一部分，并在此基础上创建一个订单

gulpdebug

插件仅用于查看控制台中文件的顺序。因此，结果如下所示。您可以查看订购前后的文件列表

$ npx gulp ordering
[18:54:27] Using gulpfile ~/own_projects/untitled/gulpfile.js
[18:54:27] Starting 'ordering'...
[18:54:27] gulp-debug: test/1-icon.svg
[18:54:27] gulp-debug: test/10-icon.svg
[18:54:27] gulp-debug: test/11-icon.svg
[18:54:27] gulp-debug: test/12-icon.svg
[18:54:27] gulp-debug: test/2-icon.svg
[18:54:27] gulp-debug: test/20-icon.svg
[18:54:27] gulp-debug: test/21-icon.svg
[18:54:27] gulp-debug: test/22-icon.svg
[18:54:27] gulp-debug: test/3-icon.svg
[18:54:27] gulp-debug: 9 items
[18:54:27] gulp-debug: test/1-icon.svg
[18:54:27] gulp-debug: test/2-icon.svg
[18:54:27] gulp-debug: test/3-icon.svg
[18:54:27] gulp-debug: test/10-icon.svg
[18:54:27] gulp-debug: test/11-icon.svg
[18:54:27] gulp-debug: test/12-icon.svg
[18:54:27] gulp-debug: test/20-icon.svg
[18:54:27] gulp-debug: test/21-icon.svg
[18:54:27] gulp-debug: test/22-icon.svg
[18:54:27] gulp-debug: 9 items
[18:54:28] Finished 'ordering' after 72 ms