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, но ни один из них не дал мне точного порядка файлов, такого как мой каталог.

Любой способ сделать это?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
726
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Да, файл заказов на глоток такой же, как и строки. Для управления заказом вы можете использовать плагин gulp-sort. Вот пример, я сделал

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, которая берет первую часть имени файла и на ее основе создает заказ.

Плагин gulp-debug используется только для просмотра порядка файлов в консоли. Итак, результат выглядит следующим образом. Вы можете посмотреть список файлов до и после заказа

$ 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

Другие вопросы по теме