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

Question

如下面 gulpfile.js 所示，我正在尝试将 jQuery、bootstrap.js 和来自子文件夹的 Javascript 片段集合编译成单个 app.js输出文件。它正在工作，只是子文件夹中的片段出现在 app.js 输出文件的顶部，在 jQuery 被加载之前。

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

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
);

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

Why is Gulp concatenating my output in the wrong order?

gulp

gulp-uglify

gulp-concat