与Gulp一起使用Concat脚本

举例来说，假设您要在Backbone或任何其他平台上构建项目，并且需要按特定顺序加载脚本，例如，underscore.js需要在之前加载backbone.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将underscore.js在之后连接backbone.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'
]

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

帮助，如果你需要一些文件来另一件事后文件的斑点，是从你的水珠排除特定的文件，就像这样：

[
  '/src/**/!(foobar)*.js', // all files that end in .js EXCEPT foobar*.js
  '/src/js/foobar.js',
]

您可以将其与指定需要首先出现的文件结合起来，如查德·约翰逊的答案中所述。

我已经使用了gulp-order插件，但是它并不总是成功的，因为您可以通过我的堆栈溢出后的gulp-order节点模块的合并流看到。在浏览Gulp文档时，我遇到了流线型模块，该模块在指定我的情况下并置的顺序非常有效。https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

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

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-useref，可以按声明顺序将索引文件中声明的每个脚本连接起来。

https://www.npmjs.com/package/gulp-useref

var $ = require('gulp-load-plugins')();
gulp.task('jsbuild', function () {
  var assets = $.useref.assets({searchPath: '{.tmp,app}'});
  return gulp.src('app/**/*.html')
    .pipe(assets)
    .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
    .pipe(gulp.dest('dist'))
    .pipe($.size({title: 'html'}));
});

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

<!-- 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

该类型的流也可用于确保文件的具体顺序用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/'));
});

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

0_normalize.scss
1_tikitaka.scss
main.scss

它完全没有任何问题。

对于我从bower提取的每个程序包，我的脚本都组织在不同的文件夹中，另外，我自己的脚本也适用于我的应用程序。由于要在某个位置列出这些脚本的顺序，为什么不只在gulp文件中列出它们呢？对于您项目中的新开发人员，很高兴在此列出了所有脚本端点。您可以使用gulp-add-src来做到这一点：

gulpfile.js

var gulp = require('gulp'),
    less = require('gulp-less'),
    minifyCSS = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    addsrc = require('gulp-add-src'),
    sourcemaps = require('gulp-sourcemaps');

// CSS & Less
gulp.task('css', function(){
    gulp.src('less/all.less')
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(sourcemaps.write('source-maps'))
        .pipe(gulp.dest('public/css'));
});

// JS
gulp.task('js', function() {
    gulp.src('resources/assets/bower/jquery/dist/jquery.js')
    .pipe(addsrc.append('resources/assets/bower/bootstrap/dist/js/bootstrap.js'))
    .pipe(addsrc.append('resources/assets/bower/blahblah/dist/js/blah.js'))
    .pipe(addsrc.append('resources/assets/js/my-script.js'))
    .pipe(sourcemaps.init())
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(sourcemaps.write('source-maps'))
    .pipe(gulp.dest('public/js'));
});

gulp.task('default',['css','js']);

注意： jQuery和Bootstrap已添加，用于演示订单。对于CDN来说，使用CDN可能更好一些，因为它们的使用非常广泛，而浏览器可能已经从其他站点缓存了它们。

尝试stream-series。它像merge-stream / event-stream.merge（）一样工作，除了它不是交织而是附加到末尾。它不需要您指定对象模式（例如streamqueue），因此您的代码更加简洁。

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'))
});

merge2看起来是目前唯一可用且可维护的有序流合并工具。

更新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');

另一种方法是使用专门为此问题创建的Gulp插件。https://www.npmjs.com/package/gulp-ng-module-sort

它允许您通过添加.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}))

我只是用gulp-angular-filesort

function concatOrder() {

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

我在一个模块环境中，所有环境都是使用gulp依赖于核心的。因此，core需要在其他模块之前附加模块。

我做了什么：

1. 将所有脚本移动到src文件夹
2. 只是gulp-rename你的core目录_core

3. gulp保持您的订单gulp.src，我的concat src看起来像这样：

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

显然，它将_作为列表中的第一个目录（自然排序？）。

注意（angularjs）：然后，我使用gulp -angular-extender将模块动态添加到core模块中。编译后看起来像这样：

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

其中Admin和Products是两个模块。

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

我从此页面尝试了几种解决方案，但没有一个起作用。我有一系列带编号的文件，我只是想按字母顺序的文件夹名称排序，因此在通过管道传输到concat()它们按相同的顺序进行排序。即，保留全局输入的顺序。容易吧？

这是我特定的概念验证代码（print只是为了查看打印到cli的顺序）：

var order = require('gulp-order');
var gulp = require('gulp');
var print = require('gulp-print').default;

var options = {};

options.rootPath = {
  inputDir: process.env.INIT_CWD + '/Draft',
  inputGlob: '/**/*.md',
};

gulp.task('default', function(){
  gulp.src(options.rootPath.inputDir + options.rootPath.inputGlob, {base: '.'})
    .pipe(order([options.rootPath.inputDir + options.rootPath.inputGlob]))
    .pipe(print());
});

之所以疯狂gulp.src？我确定gulp.src当我能够使用sleep()函数时（使用a.map睡眠时间按索引递增的命令）来正确排序流输出。

src具有更多文件的平均目录异步结果是在具有较少文件的目录之后进行的，因为它们需要更长的处理时间。

在我的gulp设置中，我先指定供应商文件，然后再指定（更一般的）所有内容。它将供应商js成功放置在其他自定义内容之前。

gulp.src([
  // vendor folder first
  path.join(folder, '/vendor/**/*.js'),
  // custom js after vendor
  path.join(folder, '/**/*.js')
])    

显然，您可以将“ nosort”选项传递给gulp.src gulp.src。