按Gulp顺序排列的Concat脚本
例如，你正在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是一个很好的解决方案，一开始可能会很痛苦，但它很棒。
回答 14
Stack Overflow用户
发布于 2014-02-23 06:05:26
最近在构建我的AngularJS应用程序时，我用Grunt遇到了类似的问题。这是我发布的a question。
我最终所做的就是在grunt配置中显式地按顺序列出这些文件。然后，配置文件将如下所示：
[
'/path/to/app.js',
'/path/to/mymodule/mymodule.js',
'/path/to/mymodule/mymodule/*.js'
]Grunt能够找出哪些文件是重复的，并且不包括它们。同样的技术也适用于Gulp。
Stack Overflow用户
发布于 2014-05-07 10:45:12
我已经使用了吞咽顺序插件，但它并不总是成功的，正如您在我的堆栈溢出后gulp-order node module with merged streams中看到的那样。当浏览Gulp文档时，我遇到了streamque模块，在我的例子中，它很好地指定了连接的顺序。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);
});Stack Overflow用户
发布于 2015-02-01 13:37:48
使用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>在您的构建目录中，您将拥有对包含vendor.js、test.js和main.js的main.min.js的引用
https://stackoverflow.com/questions/21961142
复制相似问题
腾讯云开发者
