使用Gulp按顺序连接脚本

Question

使用Gulp按顺序连接脚本

197

比如说，你正在使用Backbone或其它框架来开发一个项目，并且需要按照一定的顺序加载脚本文件，例如需要在加载backbone.js之前先加载underscore.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之后连接underscore.js，而且source/index.html中脚本的顺序并不重要，它只看目录中的文件。

那么有人对此有什么想法吗？

我最好的建议是将供应商脚本重命名为1，2，3以使它们具有正确的顺序，但我不确定是否喜欢这种方法。

随着我的了解越来越多，我发现Browserify是一个很好的解决方案，虽然一开始可能会有些麻烦，但它非常棒。

- Michael Joseph Aubry

5

我使用Browserify来打包现在的代码。个人认为它有一些学习曲线，一开始我遇到了一些麻烦，但用gulp browserify很棒！这种方式使你的代码可以模块化，你可以在shim中处理顺序，因此在使用Browserify时不需要进行串联操作。 - Michael Joseph Aubry

谢谢！实际上我看到了一篇很棒的文章https://medium.com/@dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917?source=email-7f7d7c98862f-1405262869336-note_published，它指出对于`Angular`模块，您不需要使用`browserify`，简单的连接就可以工作，而且顺序并不重要 :) - Dmitri Zaitsev

不错，我会出于好奇心去阅读它。我正在使用backbone.js而不是angular.js，所以在我的情况下，看起来我需要坚持使用browserify。 - Michael Joseph Aubry

我正在使用bower来管理我的客户端依赖项，并且它与gulp很好地配合使用。main-bower-files可以用来获取所有源的列表，然后您可以将它们连接并压缩。 - Codebling

尝试使用gulp-order包。 - Anton Putau

显示剩余3条评论

17个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- casper123 · Answer 1

对我来说，我的管道中有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}))

- Maccurt · Answer 2

我只是使用gulp-angular-filesort

function concatOrder() {

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

- Jeremy John · Answer 3

我尝试了这个页面上的几种解决方案，但都没有起作用。我有一系列编号文件，我只想按字母顺序排序文件夹名称，以便当管道传输到concat()时它们处于相同的顺序。也就是说，保留globbing输入的顺序。很容易，对吧？

这是我的具体概念证明代码（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());
});

< p > gulp.src 的疯狂原因？我确定当我能够使用 sleep() 函数（使用 .map 并通过索引递增睡眠时间）来正确排序流输出时，gulp.src 是异步运行的。

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

- soyuka · Answer 4

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

我的做法：

将所有脚本移动到一个名为 src 的文件夹中
只需将您的 core 目录重命名为 _core，使用 gulp-rename

gulp 会保持您的 gulp.src 的顺序，我的 concat src 如下所示：

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

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

注意（angularjs）：然后我使用{{link1：gulp-angular-extender}}动态向core模块添加模块。编译后看起来像这样：

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

Admin 和 Products 是两个模块。

- Wildhammer · Answer 5

显然，您可以通过在gulp.src gulp.src中传递“nosort”选项来实现。

- zak.http · Answer 6

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

- ProGrammar · Answer 7

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

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