为什么 Gulp 以错误的顺序连接我的输出？

Question

如以下 gulpfile.js 所示，我正在尝试将 jQuery、bootstrap.js 和 Javascript sn-ps 集合从子文件夹编译到单个 app.js 输出文件中。它正在工作，除了子文件夹中的 sn-ps 在加载 jQuery 之前出现在 app.js 输出文件的顶部。

如何确保这些文件以正确的顺序输出？

const { src, dest, watch, series, parallel } = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
var merge2 = require('merge2');

const files = {
  jsSrcPath: [
    '../node_modules/jquery/dist/jquery.js',
    '../node_modules/bootstrap/dist/js/bootstrap.js',
    'js/*.js'
  ],
  jsDstPath: '../public/js'
}

function jsTask(){
  return merge2(files.jsSrcPath.map(function (file) {
    return src(file)
  }))
  .pipe(concat('app.js'))
  .pipe(uglify())
  .pipe(dest(files.jsDstPath));
}

function watchTask(){
    watch(files.jsSrcPath, jsTask);
}

exports.default = series(
    jsTask,
    watchTask
);

Answer 1

这里发生了一些内部问题，在我的测试中，我看到顺序有时是随机的，有时基于修改时间，有时是按顺序排列的。无论如何，最好使用一种工具来确保我们的流始终按照我们想要的顺序排列。

gulp-order 就是为此目的而存在的。它可以采用您已经拥有的特定路径和 glob 语法，因此您可以将其重新传递给插件：

const { src, dest, watch, series, parallel } = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const order = require('gulp-order'); // Added
var merge2 = require('merge2');

const files = {
  jsSrcPath: [
    '../node_modules/jquery/dist/jquery.js',
    '../node_modules/bootstrap/dist/js/bootstrap.js',
    'js/*.js'
  ],
  jsDstPath: 'dist'
}

function jsTask() {
  return merge2(files.jsSrcPath.map(function (file) {
    return src(file)
  }))
    .pipe(order(files.jsSrcPath)) // Added
    .pipe(concat('app.js'))
    .pipe(uglify())
    .pipe(dest(files.jsDstPath));
}

function watchTask() {
  watch(files.jsSrcPath, jsTask);
}

exports.default = series(
  jsTask,
  watchTask
);