Javascript Concat脚本按顺序吞咽

例如，您正在主干网上构建项目，需要按特定顺序加载脚本，例如，

下划线.js

需要在

主干网.js

之前加载

我怎样才能让它在脚本中保持有序

// JS concat, strip debugging and minify
gulp.task('scripts', function() {
    gulp.src(['./source/js/*.js', './source/js/**/*.js'])
    .pipe(concat('script.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(gulp.dest('./build/js/'));
});

我在

source/index.html

中有正确的脚本顺序，但由于文件是按字母顺序组织的，gulp将在

backbone.js

之后浓缩

下划线.js

，而我的

source/index.html

中脚本的顺序无关紧要，它会查看目录中的文件

有人对此有想法吗

我最好的办法是用

1

、

2

、

3

重命名供应商脚本，以便为它们提供正确的顺序，但我不确定我是否喜欢这样做

---

当我了解到更多信息时，我发现Browserify是一个很好的解决方案，一开始可能会很痛苦，但它很好。

最近我在构建AngularJS应用程序时遇到了Grunt的类似问题。这是我贴的

我最后做的是在grunt配置中按顺序显式列出文件。配置文件将如下所示：

[
  '/path/to/app.js',
  '/path/to/mymodule/mymodule.js',
  '/path/to/mymodule/mymodule/*.js'
]

concat: ['./client/src/js/*.js', './client/src/js/**/*.js', './client/src/js/**/**/*.js']

angular.module('Core', ["ui.router","mm.foundation",(...),"Admin","Products"])

<!-- build:js js/main.min.js -->
    <script src="js/vendor/vendor.js"></script>
    <script src="js/modules/test.js"></script>
    <script src="js/main.js"></script>

---

Grunt能够找出哪些文件是重复的，而不包括它们。同样的技术也适用于Gulp。

如果您需要在文件块后面添加一些文件，另一个帮助方法是从glob中排除特定文件，如下所示：

[
'/src/**/！（foobar）*.js'，//除foobar*.js以外以.js结尾的所有文件
“/src/js/foobar.js”，
]

---

您可以将此与指定需要放在第一位的文件结合起来，如Chad Johnson的回答所述。

我只需在文件名的开头添加数字：

0_normalize.scss
1_tikitaka.scss
main.scss

---

它在gulp中工作没有任何问题。

我使用过gulporder插件，但它并不总是成功，正如我的堆栈溢出帖子所示。在浏览Gulp文档时，我遇到了streamque模块，它在我的案例中非常适合指定连接顺序

下面是我如何使用它的示例

var gulp         = require('gulp');
var concat       = require('gulp-concat');
var handleErrors = require('../util/handleErrors');
var streamqueue  = require('streamqueue');

gulp.task('scripts', function() {
    return streamqueue({ objectMode: true },
        gulp.src('./public/angular/config/*.js'),
        gulp.src('./public/angular/services/**/*.js'),
        gulp.src('./public/angular/modules/**/*.js'),
        gulp.src('./public/angular/primitives/**/*.js'),
        gulp.src('./public/js/**/*.js')
    )
        .pipe(concat('app.js'))
        .pipe(gulp.dest('./public/build/js'))
        .on('error', handleErrors);
});

---

我在一个模块环境中，所有模块都是使用gulp的核心依赖项。 因此，

核心

模块需要在其他模块之前追加

我所做的：

将所有脚本移动到

src

文件夹中

只需将

core

目录重命名为

\u core

gulp正在保持您的

gulp.src

的顺序，我的concat

src

如下所示：

[
  '/path/to/app.js',
  '/path/to/mymodule/mymodule.js',
  '/path/to/mymodule/mymodule/*.js'
]

concat: ['./client/src/js/*.js', './client/src/js/**/*.js', './client/src/js/**/**/*.js']

angular.module('Core', ["ui.router","mm.foundation",(...),"Admin","Products"])

<!-- build:js js/main.min.js -->
    <script src="js/vendor/vendor.js"></script>
    <script src="js/modules/test.js"></script>
    <script src="js/main.js"></script>

它显然会将

\uu

作为列表中的第一个目录（自然排序？）

注（angularjs）： 然后，我使用将模块动态添加到

核心

模块。 看起来是这样的：

[
  '/path/to/app.js',
  '/path/to/mymodule/mymodule.js',
  '/path/to/mymodule/mymodule/*.js'
]

concat: ['./client/src/js/*.js', './client/src/js/**/*.js', './client/src/js/**/**/*.js']

angular.module('Core', ["ui.router","mm.foundation",(...),"Admin","Products"])

<!-- build:js js/main.min.js -->
    <script src="js/vendor/vendor.js"></script>
    <script src="js/modules/test.js"></script>
    <script src="js/main.js"></script>

其中Admin和Products是两个模块。

也可以使用来确保文件的特定顺序

gulp.src

。将

backbone.js

始终作为最后一个要处理的文件的示例代码：

var gulp = require('gulp');
var sort = require('sort-stream');
gulp.task('scripts', function() {
gulp.src(['./source/js/*.js', './source/js/**/*.js'])
  .pipe(sort(function(a, b){
    aScore = a.path.match(/backbone.js$/) ? 1 : 0;
    bScore = b.path.match(/backbone.js$/) ? 1 : 0;
    return aScore - bScore;
  }))
  .pipe(concat('script.js'))
  .pipe(stripDebug())
  .pipe(uglify())
  .pipe(gulp.dest('./build/js/'));
});

---

使用gulpuseref，您可以按照声明顺序连接索引文件中声明的每个脚本

在HTML中，您必须声明要生成的构建文件的名称，如下所示：

[
  '/path/to/app.js',
  '/path/to/mymodule/mymodule.js',
  '/path/to/mymodule/mymodule/*.js'
]

concat: ['./client/src/js/*.js', './client/src/js/**/*.js', './client/src/js/**/**/*.js']

angular.module('Core', ["ui.router","mm.foundation",(...),"Admin","Products"])

<!-- build:js js/main.min.js -->
    <script src="js/vendor/vendor.js"></script>
    <script src="js/modules/test.js"></script>
    <script src="js/main.js"></script>

---

在您的构建目录中，您将引用main.min.js，其中包含vendor.js、test.js和main.js

对于从bower拉入的每个包，我的脚本都组织在不同的文件夹中，另外还有我自己的应用程序脚本。既然要在某个地方列出这些脚本的顺序，为什么不在gulp文件中列出它们呢？对于项目中的新开发人员，这里列出了所有脚本端点，这很好。您可以通过以下方式执行此操作：

gulpfile.js

注意：添加jQuery和Bootstrap是为了演示订单。可能更好的方法是使用CDN，因为CDN的使用非常广泛，而且浏览器可以从其他站点缓存CDN。

试试看。它的工作原理与/不同的是，它不是交错的，而是附加到末尾。它不需要您像这样指定对象模式，因此代码更简洁

var series = require('stream-series');

gulp.task('minifyInOrder', function() {
    return series(gulp.src('vendor/*'),gulp.src('extra'),gulp.src('house/*'))
        .pipe(concat('a.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dest'))
});

---

另一种方法是使用专门为此问题创建的Gulp插件

它允许您通过添加

.pipe（ngModuleSort（））

对脚本进行排序，如下所示：

var ngModuleSort = require('gulp-ng-module-sort');
var concat = require('gulp-concat');

gulp.task('angular-scripts', function() {
    return gulp.src('./src/app/**/*.js')
        .pipe(ngModuleSort())
        .pipe(concat('angularAppScripts.js))
        .pipe(gulp.dest('./dist/));
});

假设目录约定为：

|——— src/
|   |——— app/
|       |——— module1/
|           |——— sub-module1/
|               |——— sub-module1.js
|           |——— module1.js
|       |——— module2/
|           |——— sub-module2/
|               |——— sub-module2.js
|           |——— sub-module3/
|               |——— sub-module3.js
|           |——— module2.js
|   |——— app.js

希望这有帮助

对我来说，我在管道中有natualSort（）和angularFileSort（），它正在对文件进行重新排序。我把它拿走了，现在它对我很好用

$.inject( // app/**/*.js files
    gulp.src(paths.jsFiles)
      .pipe($.plumber()), // use plumber so watch can start despite js errors
      //.pipe($.naturalSort())
      //.pipe($.angularFilesort()),
    {relative: true}))

---

我只是用大口角形锉刀

function concatOrder() {

    return gulp.src('./build/src/app/**/*.js')
        .pipe(sort())
        .pipe(plug.concat('concat.js'))
        .pipe(gulp.dest('./output/'));
}

---

如果要订购第三方库依赖项，请尝试。这个包基本上会检查bower.json中的每个包依赖项，然后为您连接它们。

看起来是目前唯一可以工作和维护的有序流合并工具

更新2020 API总是在变化，一些库变得不可用或包含漏洞，或者它们的依赖项包含多年未修复的漏洞。对于文本文件操作，您最好使用自定义NodeJS脚本和流行的库，如

globby

和

fs extra

以及其他不带Gulp、Grunt等包装的库

import globby from 'globby';
import fs from 'fs-extra';

async function bundleScripts() {
    const rootPaths = await globby('./source/js/*.js');
    const otherPaths = (await globby('./source/**/*.js'))
        .filter(f => !rootFiles.includes(f));
    const paths = rootPaths.concat(otherPaths);

    const files = Promise.all(
        paths.map(
            // Returns a Promise
            path => fs.readFile(path, {encoding: 'utf8'})
        )
    );

    let bundle = files.join('\n');
    bundle = uglify(bundle);
    bundle = whatever(bundle);
    bundle = bundle.replace(/\/\*.*?\*\//g, '');

    await fs.outputFile('./build/js/script.js', bundle, {encoding: 'utf8'});
}

bundleScripts.then(() => console.log('done');

---

我尝试了本页中的几种解决方案，但均无效。我有一系列编号的文件，我只想按字母顺序排列foldername，这样当管道连接到

concat（）

时，它们的顺序就相同了。也就是说，保留全局输入的顺序。简单，对吗

以下是我的特定概念验证代码（

print

只是为了查看打印到cli的顺序）：

疯狂的

gulp.src

的原因是什么？当我能够使用

sleep（）

函数（使用睡眠时间按索引递增的

.map

来正确排序流输出时，我确定

gulp.src

正在异步运行

src

mean dirs的异步的结果是f更多