gulp concat脚本按顺序？
比方说，你正在build立一个骨干或其他任何项目，你需要按照一定的顺序加载脚本，例如“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会在backbone.js之后进行concat下划线，而在我的source / index.html中脚本的顺序并不重要，它会查看目录中的文件。
那么有没有人有这个想法？
我最好的想法是用1,2,3来重命名供应商脚本，给他们正确的顺序，但我不确定我是否喜欢这个。
编辑：正如我学到更多，我发现browserify是一个很好的解决scheme，它可以是一个痛苦，但它是伟大的。
在构build我的AngularJS应用程序时，最近与Grunt有类似的问题。 这是我发布的一个问题 。
我最终做的是在gruntconfiguration中按顺序显式列出文件。 所以它看起来像：
[ '/path/to/app.js', '/path/to/mymodule/mymodule.js', '/path/to/mymodule/mymodule/*.js' ]
事情奏效。 而Grunt显然足够聪明，不会包含同一个文件两次。
这与Gulp一样。
另一件有用的东西，如果你需要一些文件来一个文件后，是从你的glob中排除特定的文件，如下所示：
[ '/src/**/!(foobar)*.js', // all files that end in .js EXCEPT foobar*.js '/src/js/foobar.js', ]
你可以把它和指定的文件结合起来，就像Chad Johnson的回答中所解释的那样。
我已经使用了gulp-order插件，但并不总是成功，正如你可以看到我的堆栈溢出后gulp顺序节点模块与合并stream 。 在浏览Gulp文档时，我遇到了在我的案例连接中指定顺序的stream式模块。 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文件的名称，如下所示：
<!-- 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>
在您的build目录中，您将拥有对main.min.js的引用，其中将包含vendor.js，test.js和main.js
sortingstream也可以用来确保具有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/')); });
我有我的脚本组织在不同的文件夹中，我从鲍尔拉入的每个包，加上我自己的脚本为我的应用程序。 既然你要列出这些脚本的顺序，为什么不把它们列在你的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的人来说可能更好，因为他们被广泛使用，浏览器可以让他们从其他网站caching。
我只是将数字添加到文件名的开头：
0_normalize.scss 1_tikitaka.scss main.scss
它工作在一口没有任何问题。
尝试stream式系列 。 它像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')) });
另一种方法是使用专门为此问题创build的Gulp插件。 https://www.npmjs.com/package/gulp-ng-module-sort
它允许您通过添加一个.pipe(ngModuleSort())来sorting脚本，如下所示：
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（）在pipe道中重新sorting文件。 我删除它，现在对我来说工作正常
$.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/')); }
我在一个模块环境，所有的核心依赖使用吞咽。 所以， core模块需要在其他模块之前添加。
我做了什么：
- 将所有的脚本移动到一个
src文件夹 - 只需
gulp-rename你的core目录gulp-rename为_core -
gulp.src保持你的gulp.src的顺序，我的concatsrc看起来像这样：concat: ['./client/src/js/*.js', './client/src/js/**/*.js', './client/src/js/**/**/*.js']
显然，将_作为列表中的第一个目录（自然sorting？）。
注意（angularjs）：然后我使用gulp -angular-extender将模块dynamic添加到core模块。 编译它看起来像这样：
angular.module('Core', ["ui.router","mm.foundation",(...),"Admin","Products"])
pipe理员和产品是两个模块。
如果您想订购第三方库依赖项，请尝试wiredep 。 这个软件包主要检查bower.json中的每个软件包依赖关系，然后为你连接它们。
merge2看起来像现在唯一的工作和维护有序stream合并工具。
