Question

我有一组Javascript文件，其中包括一些供应商文件，例如jQuery和bootstrap，以及一些ES6文件，需要将其“转译”为ES5。

我创建了一个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已成功创建，但是使用它时，我从以下已转译的文件之一中获取了以下错误：

未捕获的ReferenceError：未定义$

如果我检查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和bootstrap文件，我不想通过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。 / p>

假设您的项目设置如下：

- 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：串联和使用jQuery

1 个答案: