Concat-Skripte in der Reihenfolge mit Gulp

Angenommen, Sie underscore.jserstellen ein Projekt auf Backbone oder was auch immer und müssen Skripte in einer bestimmten Reihenfolge laden, z. B. müssen sie zuvor geladen werden backbone.js.

Wie kann ich die Skripte so zusammenfassen, dass sie in Ordnung sind?

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

Ich habe die richtige Reihenfolge der Skripte in meinem source/index.html, aber da die Dateien in alphabetischer Reihenfolge organisiert sind, konzentriert sich gulp underscore.jsdanach backbone.jsund die Reihenfolge der Skripte in meinem source/index.htmlspielt keine Rolle. Es werden die Dateien im Verzeichnis angezeigt .

Hat jemand eine Idee dazu?

Beste Idee , die ich habe , ist die Kreditoren Skripte umbenennen 1, 2, 3ihnen die richtige Reihenfolge zu geben, aber ich bin nicht sicher , ob ich so.

Als ich mehr erfuhr, fand ich, dass Browserify eine großartige Lösung ist. Es kann zunächst schmerzhaft sein, aber es ist großartig.

Ich hatte kürzlich ein ähnliches Problem mit Grunt beim Erstellen meiner AngularJS-App. Hier ist eine Frage, die ich gepostet habe.

Am Ende habe ich die Dateien explizit in der Reihenfolge in der Grunt-Konfiguration aufgelistet. Die Konfigurationsdatei sieht dann folgendermaßen aus:

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

Grunt kann herausfinden, welche Dateien Duplikate sind und diese nicht enthalten. Die gleiche Technik funktioniert auch mit Gulp.

Eine andere Sache, die hilft, wenn Sie einige Dateien benötigen, um nach einem Blob von Dateien zu kommen , ist das Ausschließen bestimmter Dateien von Ihrem Glob, wie folgt:

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

Sie können dies mit der Angabe von Dateien kombinieren, die an erster Stelle stehen müssen, wie in Chad Johnsons Antwort erläutert.

Ich habe das Gulp-Order-Plugin verwendet, aber es ist nicht immer erfolgreich, wie Sie an meinem Stapelüberlauf nach dem Gulp-Order-Knotenmodul mit zusammengeführten Streams sehen können . Beim Durchsuchen der Gulp-Dokumente bin ich auf das Streamque-Modul gestoßen, das sich sehr gut für die Angabe der Reihenfolge der Verkettung in meinem Fall eignet. https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

Ein Beispiel dafür, wie ich es benutzt habe, ist unten

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);
});

Mit gulp-useref können Sie jedes in Ihrer Indexdatei deklarierte Skript in der Reihenfolge verketten, in der Sie es deklarieren.

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

Und im HTML müssen Sie den Namen der Build-Datei, die Sie generieren möchten, wie folgt deklarieren:

<!-- 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>

In Ihrem Build-Verzeichnis befindet sich der Verweis auf main.min.js, der vendor.js, test.js und main.js enthält

Der Sortierstrom kann auch verwendet werden, um eine bestimmte Reihenfolge der Dateien mit sicherzustellen gulp.src. Beispielcode, der die backbone.jsimmer als letzte zu verarbeitende Datei enthält:

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

Ich füge nur Zahlen am Anfang des Dateinamens hinzu:

0_normalize.scss
1_tikitaka.scss
main.scss

Es funktioniert in Schluck ohne Probleme.

Ich habe meine Skripte in verschiedenen Ordnern für jedes Paket organisiert, das ich von bower abrufe, sowie mein eigenes Skript für meine App. Da Sie die Reihenfolge dieser Skripte irgendwo auflisten werden, warum nicht einfach in Ihrer gulp-Datei auflisten? Für neue Entwickler in Ihrem Projekt ist es schön, dass alle Ihre Skriptendpunkte hier aufgelistet sind. Sie können dies mit gulp-add-src tun :

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']);

Hinweis: jQuery und Bootstrap wurden zu Demonstrationszwecken der Bestellung hinzugefügt. Wahrscheinlich ist es besser, CDNs für diese zu verwenden, da sie so weit verbreitet sind und Browser sie möglicherweise bereits von anderen Websites zwischengespeichert haben.

Versuchen Sie es mit Stream-Serien . Es funktioniert wie merge-stream / event-stream.merge (), nur dass es nicht verschachtelt, sondern an das Ende angehängt wird. Sie müssen den Objektmodus nicht wie " Streamqueue" angeben , damit Ihr Code sauberer wird.

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

merge2 scheint derzeit das einzige funktionierende und gepflegte Tool zum Zusammenführen geordneter Streams zu sein.

Update 2020

Die APIs ändern sich ständig, einige Bibliotheken werden unbrauchbar oder enthalten Schwachstellen, oder ihre Abhängigkeiten enthalten Schwachstellen, die seit Jahren nicht mehr behoben sind. Für die Bearbeitung von Textdateien sollten Sie benutzerdefinierte NodeJS-Skripte und beliebte Bibliotheken wie globbyund fs-extrazusammen mit anderen Bibliotheken ohne Gulp-, Grunt- usw. Wrapper verwenden.

import globby from 'globby';
import fs from 'fs-extra';

async function bundleScripts() {
    const rootPaths = await globby('./source/js/*.js');
    const otherPaths = (await globby('./source/**/*.js'))
        .filter(f => !rootFiles.includes(f));
    const paths = rootPaths.concat(otherPaths);

    const files = Promise.all(
        paths.map(
            // Returns a Promise
            path => fs.readFile(path, {encoding: 'utf8'})
        )
    );

    let bundle = files.join('\n');
    bundle = uglify(bundle);
    bundle = whatever(bundle);
    bundle = bundle.replace(/\/\*.*?\*\//g, '');

    await fs.outputFile('./build/js/script.js', bundle, {encoding: 'utf8'});
}

bundleScripts.then(() => console.log('done');

Eine alternative Methode ist die Verwendung eines Gulp-Plugins, das speziell für dieses Problem erstellt wurde. https://www.npmjs.com/package/gulp-ng-module-sort

Sie können Ihre Skripte sortieren, indem Sie Folgendes hinzufügen .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/));
});

Angenommen, eine Verzeichniskonvention von:

|——— 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

Hoffe das hilft!

Für mich hatte ich natualSort () und angularFileSort () in Pipe, die die Dateien neu ordneten. Ich habe es entfernt und jetzt funktioniert es gut für mich

$.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}))

Ich benutze nur gulp-angle-filesort

function concatOrder() {

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

Ich bin in einer Modulumgebung, in der alle mit gulp kernabhängig sind. Also, diecore Modul muss also vor den anderen angehängt werden.

Was ich getan habe:

1. Verschieben Sie alle Skripte in einen srcOrdner
2. Nur gulp-renamedein coreVerzeichnis zu_core

3. schluck hält die gulp.srcordnung von dir , mein concat srcsieht so aus:

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

Es wird offensichtlich das _als erstes Verzeichnis aus der Liste nehmen (natürliche Sortierung?).

Hinweis (anglejs): Ich verwende dann gulp- angle -extender , um die Module dynamisch zum coreModul hinzuzufügen . Zusammengestellt sieht es so aus:

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

Wobei Admin und Produkte zwei Module sind.

Wenn Sie Bibliotheksabhängigkeiten von Drittanbietern bestellen möchten , versuchen Sie es mit wiredep . Dieses Paket überprüft grundsätzlich jede Paketabhängigkeit in bower.json und verkabelt sie dann für Sie.

Ich habe mehrere Lösungen von dieser Seite ausprobiert, aber keine hat funktioniert. Ich hatte eine Reihe von nummerierten Dateien, die ich einfach nach alphabetischem Ordnernamen sortieren wollte, damit concat()sie in der gleichen Reihenfolge weitergeleitet werden. Behalten Sie also die Reihenfolge der Globbing-Eingabe bei. Einfach richtig?

Hier ist mein spezifischer Proof-of-Concept-Code ( printnur um die auf dem CLI gedruckte Bestellung zu sehen):

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());
});

Der Grund für den Wahnsinn von gulp.src? Ich habe festgestellt, dass gulp.srcasynchron ausgeführt wurde, als ich eine sleep()Funktion verwenden konnte (mithilfe von a.map mit dem Index inkrementierten Schlafzeit) verwenden konnte, um die Stream-Ausgabe ordnungsgemäß zu ordnen.

Das Ergebnis der Asynchronität von srcmittleren Verzeichnissen mit mehr Dateien kam nach Verzeichnissen mit weniger Dateien, da die Verarbeitung länger dauerte.

In meinem Gulp-Setup spezifiziere ich zuerst die Herstellerdateien und dann das (allgemeinere) Alles. Und es stellt den Anbieter erfolgreich js vor die anderen benutzerdefinierten Sachen.

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

Anscheinend können Sie die Option "nosort" an gulp.src gulp.src übergeben .