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

Question

我有一组 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，第二个引导程序等）。 bundle.js 已成功创建，但在使用它时，我收到来自转译文件之一的以下错误：

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

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

我也尝试过使用流队列，但没有运气，我得到了相同的结果：

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', ]

Answer 1

当您将流从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(...)