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貌似唯一的工作，並保持有序的流此刻合併工具。