Javascript Gulp：连接和使用jQuery时出现的问题

我有一组Javascript文件，其中包括一些供应商文件，如jQuery和bootstrap，以及一些需要“传输”到ES5中的ES6文件

我创建了一个gulp任务来处理所有这些文件并将它们合并到一个文件中：

gulp.task("processJs4", () => {
    return gulp.src(tmpJsAssets)
        .pipe(order(tmpJsAssets))
        .pipe(sourcemaps.init())
        .pipe(babel({presets: ['es2015']}))
        .pipe(concat('bundle.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(resources.jsDest))
        .pipe(notify({ message: 'Javascript task complete...'}))
})

其中，tmpJsAssets是一个脚本数组，按照我希望它们被处理的顺序排列（第一个jQuery、第二个bootstrap等等）。bundle.js已成功创建，但在使用它时，我从一个传输文件中得到以下错误：

未捕获引用错误：$未定义

如果我检查bundle.js，我注意到jQuery在文件的开头没有被“附加”。我使用gulporder是因为在其他帖子中我读到它会按照文件传递的顺序来处理文件

我也尝试过使用streamqueue，但没有成功，我得到了相同的结果：

gulp.task("processJs4", () => {
    return streamqueue({ objectMode: true }, gulp.src(tmpJsAssets))
        .pipe(sourcemaps.init())
        .pipe(babel({presets: ['es2015']}))
        .pipe(concat('bundle.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(resources.jsDest))
        .pipe(notify({ message: 'Javascript task complete...'}))
})

我找到的唯一解决方案是必须将生成两个独立文件的任务分开，一个用于供应商，另一个用于我的文件。因此，我认为我可以将为这些任务生成的文件合并成一个单独的文件，但它也不起作用

我必须使用jQuery和引导文件，我不想通过npm安装它们，然后再使用它们

这些是使用的依赖项：

"babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-register": "^6.26.0",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-babel": "^7.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-notify": "^3.2.0",
    "gulp-order": "^1.1.1",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.1",
    "gulp-webpack-sourcemaps": "^0.3.0",
    "merge-stream": "^1.0.1",
    "streamqueue": "^1.1.2",

谢谢

*编辑：包括tmpJsAssets*

['src/js/vendor/jquery/jquery.min.js'，
“src/js/vendor/bootstrap/bootstrap.bundle.min.js”，
“src/js/vendor/jquery easing/jquery.easing.min.js”，
'src/js/items/application.js'，'src/js/items/scroll.js'，
“src/js/pages/about/about.js”、“src/js/pages/homepage/homepage.js”， 'src/js/pages/search app.js'，]

---

当您将流从

gulp.src（tmpJsAssets）

直接传递到

order（orderedTmpJsAssets）

时，

orderedTmpJsAssets

中指定的文件路径必须与

tmpJsAssets

相对

假设您有如下项目设置：

- src/
  - vendor/
    jQuery.js
    bootstrap.js
    libs.js
  - app/
    ...your JS files

您可以按正确的顺序将其捆绑，如：

gulp.src('src/**/*.js') // glob all .js files in ./src directory
  .pipe(order([
    'vendor/jQuery.js', // jQuery First
    'vendor/**/*.js',  // other files in the ./src/vendor directory
    'app/**/*.js' // files in the ./src/app directory
  ])
  .pipe(...)

---

不，这也不行。因此，在gulp.src中传递一个文件数组，因为我不想处理特定目录中的所有文件，然后，按照您的建议，按顺序传递一个文件名数组（没有完整路径，因为它在gulp.src中已被引用），顺序是我要处理它们。仍然收到相同的错误。您可以发布

tmpJsAssets

的值吗？gulp.src应该按顺序正常处理，在对glob模式进行排序时只需要order插件。