gulp concat脚本？

Question

举例说，你正在建立一个骨干或其他任何项目，你需要按照一定的顺序加载脚本，例如“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/')); 
}); 

我在我的源/ index.html的脚本的正确顺序，但因为文件是由字母顺序排列，一饮而尽将Concat的Backbone.js的后强调，在我的源脚本的命令/ index.html无关紧要，它会查看目录中的文件。

那么有没有人有这个想法？

我的最佳想法是用1,2,3重新命名供应商脚本以给他们正确的顺序，但我不确定我是否喜欢这样。

编辑：正如我学到更多，我发现browserify是一个很好的解决方案，它可以是一个开始时的痛苦，但它是伟大的。

Answer 1

在构建我的AngularJS应用程序时，最近与Grunt有类似的问题。这是我发布的a question。

我最终做的是在grunt配置中按顺序显式列出文件。所以它看起来像：

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

而且事情奏效。而Grunt显然足够聪明，不会包含同一个文件两次。

这与Gulp一样。

Answer 2

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

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

您可以指定文件合并这一点，如Chad Johnson的回答中所解释的那样，需要先来。

Answer 3

我只是号码加入文件名的开头：

0_normalize.scss 
1_tikitaka.scss 
main.scss 

它工作在一饮而尽没有任何问题。

Answer 4

我已经使用了gulp-order插件，但它并不总是成功，正如你可以通过我的堆栈溢出帖子gulp-order node module with merged streams所看到的那样。在浏览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); 
}); 

Answer 5

我在一个模块环境在其所有都使用吞芯家属。 因此，core模块需要在其他模块之前添加。

我所做的：

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

3. 一饮而尽是保持你的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和产品两个模块。

Answer 6

sort-stream也可用于确保具有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/')); 
}); 

Answer 7

随着一饮而尽，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> 

在你的build目录，你将有参考到main.min.js将包含vendor.js，test.js和main.js

Answer 8

我有我的脚本组织在不同的文件夹中，我从凉亭，加上我自己的脚本为我的应用程序。既然你要列出这些脚本的顺序，为什么不把它们列在你的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和引导添加的顺序演示目的。对于那些使用CDN的人可能更好，因为它们被广泛使用，浏览器可以让他们从其他网站缓存。

Answer 9

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

Answer 10

另一种方法是使用专门为此问题创建的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 

希望这有助于！

Answer 11

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

Answer 12

工作正常，我只是用大口，角文件排序

function concatOrder() { 

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

Answer 13

，如果你想订购的第三方库的依赖，尽量wiredep。这个软件包基本上检查bower.json中的每个软件包依赖关系，然后为你连接它们。

Answer 14

merge2貌似唯一的工作，并保持有序的流此刻合并工具。