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.js
je 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.js
po backbone.js
, a kolejność skryptów w moim source/index.html
nie 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
, 3
aby 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.
źródło
require
na frontonie, ponieważ oczywiście, jeśli używałeś npm po stronie serwera, widzisz, jak możesz wymagać modułów, ale Browserify pozwala ci to zrobić po stronie klienta, zachowaj aby zacząć, wymaga trochę majsterkowania, ale głównie w pakiecie.json i jeśli chcesz używać go z gulp.js lub grunt.js. Jeśli zainstalujesz pakiet przeszukiwania gulp / grunt, możesz uruchomićgulp/grunt browserify
i zamienić skrypt w jeden główny skrypt, jest to niewielka krzywa uczenia się, ale warto IMO.browserify
doAngular
modułów, gdzie proste prace konkatenacji i kolejność nie ma znaczenia :)Odpowiedzi:
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:
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.
źródło
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:
Możesz to połączyć z określeniem plików, które muszą być na pierwszym miejscu, jak wyjaśniono w odpowiedzi Chada Johnsona.
źródło
src
a do mojegobuild
widziałem, jak używasz tej składni, skończyłem z usuwaniem tej części, ponieważ nie byłem pewien, dlaczego go potrzebowałem, ma to teraz sens.['./source/js/*.js', './source/js/**/underscore.js', './source/js/**/!(underscore)*.js']
!(foobar)
), jeśli wcześniej zawarłeś konkretny plik.['src/app/**/!(*-)*.js', 'src/app/**/*.js']
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
źródło
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
W HTML musisz zadeklarować nazwę pliku kompilacji, który chcesz wygenerować:
W twoim katalogu kompilacji będziesz mieć odniesienie do main.min.js, który będzie zawierał vendor.js, test.js i main.js
źródło
Strumień sortowania można również wykorzystać do zapewnienia określonej kolejności plików
gulp.src
. Przykładowy kod, który umieszczabackbone.js
zawsze jako ostatni plik do przetworzenia:źródło
Po prostu dodaję cyfry na początku nazwy pliku:
Działa w łyku bez żadnych problemów.
źródło
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
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.
źródło
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.
źródło
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
globby
ifs-extra
inne biblioteki bez Gulp, Grunt itp.źródło
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:Zakładając konwencję katalogów:
Mam nadzieję że to pomoże!
źródło
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
źródło
Po prostu używam gulp-angular-fileort
źródło
Jestem w środowisku modułowym, w którym wszyscy są zależni od rdzenia za pomocą gulp. Tak więc
core
moduł należy dołączyć przed innymi.Co ja zrobiłem:
src
folderugulp-rename
twójcore
katalog do_core
gulp.src
mój łyk utrzymuje porządek , mój konkatsrc
wygląda następująco: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
core
modułu. Skompilowane wygląda to tak:Gdzie Administrator i Produkty to dwa moduły.
źródło
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.
źródło
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 (
print
tylko po to, żeby zobaczyć zamówienie wydrukowane na cli):Powód szaleństwa
gulp.src
? Stwierdziłem, żegulp.src
działa asynchronicznie, kiedy mogłem korzystać zsleep()
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.źródło
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.
źródło
Najwyraźniej możesz przekazać opcję „nosort” do gulp.src gulp.src .
źródło