Skrypty Concat w porządku z Gulpem

Powiedzmy, na przykład, że budujesz projekt w sieci szkieletowej lub czymkolwiek innym i musisz załadować skrypty w określonej kolejności, np. Trzeba underscore.jsje wcześniej załadować backbone.js.

Jak uzyskać powiązanie skryptów, aby były w porządku?

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

Mam prawo kolejność skryptów w moim source/index.html, ale ponieważ pliki są zorganizowane według kolejności alfabetycznej, łyk będzie Concat underscore.jspo backbone.js, a kolejność skryptów w moim source/index.htmlnie ma znaczenia, to wygląda na pliki w katalogu.

Czy ktoś ma na to pomysł?

Najlepszy pomysł mam jest do zmiany nazwy skryptów dostawcy z 1, 2, 3aby dać im właściwej kolejności, ale nie jestem pewien, czy mi się to podoba.

Gdy dowiedziałem się więcej, odkryłem, że Browserify to świetne rozwiązanie, na początku może być uciążliwe, ale jest świetne.

Miałem podobny problem z Gruntem podczas tworzenia mojej aplikacji AngularJS. Oto pytanie, które opublikowałem.

Skończyło się na jawnym wyświetleniu listy plików w kolejności w konfiguracji gruntu. Plik konfiguracyjny będzie wyglądał następująco:

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

Grunt jest w stanie dowiedzieć się, które pliki są duplikatami, a nie uwzględnić ich. Ta sama technika będzie również działać z Gulpem.

Kolejną rzeczą, która pomaga, jeśli potrzebujesz niektórych plików po kropli plików, jest wykluczenie określonych plików z globu, na przykład:

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

Możesz to połączyć z określeniem plików, które muszą być na pierwszym miejscu, jak wyjaśniono w odpowiedzi Chada Johnsona.

Użyłem wtyczki gulp-order, ale nie zawsze się to udaje, jak widać po moim przepełnieniu stosu moduł węzła zamówienia gulp ze scalonymi strumieniami . Przeglądając dokumenty Gulpa natknąłem się na moduł streamque, który całkiem dobrze działał w określaniu kolejności konkatenacji w moim przypadku.https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

Przykład tego, jak go użyłem, znajduje się poniżej

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

Dzięki gulp-useref możesz połączyć każdy skrypt zadeklarowany w pliku indeksu w kolejności, w której go deklarujesz.

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

W HTML musisz zadeklarować nazwę pliku kompilacji, który chcesz wygenerować:

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

W twoim katalogu kompilacji będziesz mieć odniesienie do main.min.js, który będzie zawierał vendor.js, test.js i main.js

Strumień sortowania można również wykorzystać do zapewnienia określonej kolejności plików gulp.src. Przykładowy kod, który umieszcza backbone.jszawsze jako ostatni plik do przetworzenia:

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

Po prostu dodaję cyfry na początku nazwy pliku:

0_normalize.scss
1_tikitaka.scss
main.scss

Działa w łyku bez żadnych problemów.

Skrypty mam uporządkowane w różnych folderach dla każdego pakietu, który ściągam z altany, oraz własny skrypt dla mojej aplikacji. Skoro zamierzasz podać gdzieś kolejność tych skryptów, dlaczego nie po prostu wymienić ich w pliku gulp? Dla nowych deweloperów twojego projektu fajnie jest, że wymieniono tutaj wszystkie punkty końcowe skryptu. Możesz to zrobić za pomocą 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']);

Uwaga: Dodano jQuery i Bootstrap dla celów demonstracyjnych porządku. Prawdopodobnie lepiej jest używać CDN dla tych, ponieważ są one tak szeroko stosowane, a przeglądarki mogą już je buforować z innych stron.

Wypróbuj serie strumieniowe . Działa jak merge-stream / event-stream.merge () z tym wyjątkiem, że zamiast przeplatania dołącza się do końca. Nie wymaga to określania trybu obiektowego, takiego jak streamqueue , więc kod jest czystszy.

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 wygląda obecnie na jedyne działające i utrzymywane narzędzie do scalania uporządkowanych strumieni.

Aktualizacja 2020

Interfejsy API zawsze się zmieniają, niektóre biblioteki stają się bezużyteczne lub zawierają luki, lub ich zależności zawierają luki, które nie są naprawiane przez lata. Do manipulacji plikami tekstowymi lepiej jest używać niestandardowych skryptów NodeJS i popularnych bibliotek, takich jak globbyi fs-extrainne biblioteki bez Gulp, Grunt itp.

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

Alternatywną metodą jest użycie wtyczki Gulp stworzonej specjalnie dla tego problemu. https://www.npmjs.com/package/gulp-ng-module-sort

Pozwala sortować skrypty, dodając .pipe(ngModuleSort())jako takie:

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

Zakładając konwencję katalogów:

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

Mam nadzieję że to pomoże!

Dla mnie miałem natualSort () i angularFileSort () w potoku, który zmieniał kolejność plików. Usunąłem go i teraz działa dla mnie dobrze

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

Po prostu używam gulp-angular-fileort

function concatOrder() {

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

Jestem w środowisku modułowym, w którym wszyscy są zależni od rdzenia za pomocą gulp. Tak więccore moduł należy dołączyć przed innymi.

Co ja zrobiłem:

1. Przenieś wszystkie skrypty do srcfolderu
2. Tylko gulp-renametwój corekatalog do_core

3. gulp.srcmój łyk utrzymuje porządek , mój konkat srcwygląda następująco:

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

Oczywiście zajmie to _jako pierwszy katalog z listy (sortowanie naturalne?).

Uwaga (angularjs): Następnie używam gulp- angular -extender, aby dynamicznie dodawać moduły do coremodułu. Skompilowane wygląda to tak:

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

Gdzie Administrator i Produkty to dwa moduły.

jeśli chcesz zamówić zależności bibliotek stron trzecich, wypróbuj wiredep . Ten pakiet w zasadzie sprawdza każdą zależność pakietu w bower.json, a następnie łączy je za Ciebie.

Próbowałem kilka rozwiązań z tej strony, ale żadne nie działało. Miałem serię plików z numerami, które po prostu chciałem uporządkować alfabetycznie nazwa pliku, więc po przesłaniu do concat()nich będą w tej samej kolejności. To znaczy, zachowaj kolejność globowania danych wejściowych. Łatwe, prawda?

Oto mój konkretny kod weryfikacyjny ( printtylko po to, żeby zobaczyć zamówienie wydrukowane na cli):

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

Powód szaleństwa gulp.src? Stwierdziłem, że gulp.srcdziała asynchronicznie, kiedy mogłem korzystać z sleep()funkcji (używając.map z czasem snu zwiększonym o indeks), aby poprawnie uporządkować wyjście strumienia.

Wynik asynchronizacji srcśrednich katalogów z większą liczbą plików nastąpił po katalogach z mniejszą liczbą plików, ponieważ ich przetwarzanie trwało dłużej.

W mojej konfiguracji łyka, najpierw określam pliki dostawcy, a następnie (ogólniej) wszystko, po drugie. I z powodzeniem stawia js dostawcy przed innymi niestandardowymi rzeczami.

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

Najwyraźniej możesz przekazać opcję „nosort” do gulp.src gulp.src .