Да, файл заказов gulp такой же, как и строки.Для управления заказами вы можете использовать плагин 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