为什么Gulp以错误的顺序连接我的输出?
如下面的gulpfile.js所示,我正在尝试将jQuery、bootstrap.js和子文件夹中的Javascript片段集合编译成单个app.js输出文件。它正在工作,只是子文件夹中的代码片段在加载jQuery之前出现在app.js输出文件的顶部 如何确保这些文件以正确的顺序输出为什么Gulp以错误的顺序连接我的输出?,gulp,gulp-uglify,gulp-concat,Gulp,Gulp Uglify,Gulp Concat,如下面的gulpfile.js所示,我正在尝试将jQuery、bootstrap.js和子文件夹中的Javascript片段集合编译成单个app.js输出文件。它正在工作,只是子文件夹中的代码片段在加载jQuery之前出现在app.js输出文件的顶部 如何确保这些文件以正确的顺序输出 const { src, dest, watch, series, parallel } = require('gulp'); const concat = require('gulp-concat'); cons
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
);
这里有一些内在的东西,在我的测试中,我看到顺序有时是随机的,有时是基于修改时间的,有时是按顺序的。在任何情况下,最好使用一个工具来确保我们的流总是按照我们想要的顺序进行 为此目的而存在。它可以采用您已有的特定路径和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
);
是的,我注意到其他一些项目的顺序似乎是随机的。我不知道要喝什么。我按照您所描述的方式设置了它,但它并没有解决这个问题,但是我做了一些进一步的挖掘,发现有必要像这样将基本路径传递给order:.pipe(order(order(files.jsSrcPath,{base:'.}))添加使其工作。接受你的回答。我将让您决定是否使用该参数更新代码示例。非常感谢!