Połącz wiele plików JavaScript w jeden plik JS [zamknięty]

91

Używam jquery w mojej aplikacji internetowej i muszę załadować więcej plików skryptów jquery na jedną stronę.

Firma Google zasugerowała, żebym połączyć wszystkie pliki skryptów jquery w jeden plik.

Jak mogę to zrobić?

Chandrasekhar
źródło

Odpowiedzi:

53

W systemie Linux możesz użyć prostego skryptu powłoki https://github.com/dfsq/compressJS.sh, aby połączyć wiele plików javascript w jeden. Korzysta z usługi online Closure Compiler, dzięki czemu wynikowy skrypt jest również skutecznie kompresowany.

$ ./compressJS.sh some-script.js another-sctipt.js onemore.js
dfsq
źródło
1
czy to może działać z kierownicą?
Dan Baker
3
Lepiej jest używać menedżera zadań, takiego jak Grunt, Gulp i inne tego typu rzeczy, które robią to automatycznie. Używając Grunta kompiluję moją kierownicę less, machinecript do wygenerowanego folderu, a następnie kopiuję również pliki js / css do wygenerowanego folderu, na końcu również zmniejszam do jednego pliku js wszystkie pliki .js i do jednego pliku css wszystkie pliki .css. Mam też obserwatora, który ponownie uruchamia tę konfigurację przy zmianie pliku, dzięki czemu mogę zapisać plik i odświeżyć przeglądarkę, a wszystkie zmiany zostały wprowadzone w ciągu 1-3 sekund.
Vadorequest
18

Po prostu połącz pliki tekstowe, a następnie użyj czegoś takiego jak kompresor YUI .

Pliki można łatwo łączyć za pomocą polecenia, cat *.js > main.jsa plik main.js można następnie uruchomić przez kompresor YUI za pomocą java -jar yuicompressor-x.y.z.jar -o main.min.js main.js.

Aktualizacja, sierpień 2014

Teraz przeszedłem na używanie Gulp do konkatenacji i kompresji javascript, ponieważ w przypadku różnych wtyczek i minimalnej konfiguracji możesz robić takie rzeczy, jak ustawianie zależności, kompilowanie coffeescript itp., A także kompresowanie JS.

Prydie
źródło
1
Naprawiono @reformed.
Prydie
11

Możesz to zrobić przez

  • za. Ręcznie: skopiuj wszystkie pliki Javascript do jednego, uruchom na nim kompresor ( opcjonalny, ale zalecany ) i prześlij na serwer i link do tego pliku.
  • b. Użyj PHP: po prostu utwórz tablicę wszystkich plików JS i includeich wszystkich i wyślij do <script>znacznika
Gary Green
źródło
1
Opcja B nie jest zalecana, ponieważ powoduje, że przeglądarka wysyła wiele żądań dotyczących wszystkich małych pojedynczych plików .js (wolno), a nie tylko jednego żądania dotyczącego większego pliku .js (szybciej).
Mikepote
5
@Mikepote, tak ... dlatego użyłem słowa includetj. Nie rób <script src = "...."> linków do wielu plików, po prostu dołącz je do jednego elementu skryptu. Najlepiej byłoby użyć cdn wraz z odpowiednim buforowaniem.
Gary Green
Przepraszam, źle odczytałem twoją odpowiedź.
Mikepote
3
Czy możesz podać tutaj jakiś przykład.
Anand Solanki
Lepiej jest użyć readfile (), aby uniknąć narzutu przetwarzania i przypadkowego uzyskania czegoś zinterpretowanego.
Chinoto Vokro
9

Zwykle mam to na Makefile:

# All .js compiled into a single one.
compiled=./path/of/js/main.js

compile:
    @find ./path/of/js -type f -name "*.js" | xargs cat > $(compiled)

Następnie biegniesz:

make compile

Mam nadzieję, że to pomoże.


źródło
8

Używam tego skryptu powłoki w systemie Linux https://github.com/eloone/mergejs .

W porównaniu z powyższymi skryptami ma tę zaletę, że jest bardzo prosty w użyciu, a dużym plusem jest to, że możesz wymienić pliki js, które chcesz scalić w wejściowym pliku tekstowym, a nie w wierszu poleceń, więc Twoja lista jest wielokrotnego użytku i nie musisz wpisywać go za każdym razem, gdy chcesz scalić pliki. Jest to bardzo przydatne, ponieważ będziesz powtarzać ten krok za każdym razem, gdy chcesz rozpocząć produkcję. Możesz także komentować pliki, których nie chcesz scalać na liście. Wiersz poleceń, który najprawdopodobniej wpiszesz, to:

$ mergejs js_files_list.txt output.js

A jeśli chcesz również skompresować wynikowy scalony plik:

$ mergejs -c js_files_list.txt output.js

Spowoduje to utworzenie output-min.jszminimalizowanego przez kompilator zamknięcia Google. Lub:

$ mergejs -c js_files_list.txt output.js output.minified.js

Jeśli chcesz mieć określoną nazwę dla swojego zminimalizowanego pliku o nazwie output.minified.js

Uważam, że jest to bardzo pomocne w przypadku prostej witryny internetowej.

eloone
źródło
7

Grupowanie skryptów przynosi efekt przeciwny do zamierzonego, należy je ładować równolegle za pomocą czegoś takiego jak http://yepnopejs.com/ lub http://headjs.com

Kapsuła
źródło
5
Istnieją ważne powody, dla których warto łączyć pliki javascript. Po pierwsze, jest całkiem możliwe, że zażądanie 20 plików 2kb zajmie więcej czasu niż zażądanie jednego pliku 40kb.
Joel B
1
Co się dzieje, ile razy na tysiąc lat?
Capsule
4
Częściej niż myślisz. Spójrz nawet na kod źródłowy stackoverflow: „... Opcja B nie jest zalecana, ponieważ powoduje ona, że ​​Twoja przeglądarka wysyła wiele żądań dla wszystkich małych pojedynczych plików .js (powolnych), a nie tylko jednego żądania dla większego .js plik (szybciej). ”
Joel B
4
@Capsule Nienawidzę ci mówić, ale internet szybko przechodzi z jQuery do MVC JavaScript, ładowanie jednego pliku zawsze będzie szybsze niż wyzwalanie wielu żądań HTTP.
Foxhoundn
1
@ Foxhoundn Internet również szybko przechodzi na HTTP2, więc nie będzie to już miało znaczenia. W każdym razie, jQuery był tylko przykładem, możesz zmierzyć się z tym samym problemem z MVC JS
Capsule
7

Skopiuj ten skrypt do notatnika i zapisz jako plik .vbs. Przeciągnij i upuść pliki .js w tym skrypcie.

ps. Działa to tylko w oknach.

set objArgs = Wscript.Arguments
set objFso = CreateObject("Scripting.FileSystemObject")
content = ""

'Iterate through all the arguments passed
for i = 0 to objArgs.count  
    on error resume next
    'Try and treat the argument like a folder
    Set folder = objFso.GetFolder(objArgs(i))
    'If we get an error, we know it is a file
    if err.number <> 0 then
        'This is not a folder, treat as file
        content = content & ReadFile(objArgs(i))
    else
        'No error? This is a folder, process accordingly
        for each file in folder.Files
            content = content & ReadFile(file.path)
        next
    end if
    on error goto 0
next

'Get system Temp folder path
set tempFolderPath = objFso.GetSpecialFolder(2)
'Generate a random filename to use for a temporary file
strTempFileName = objFso.GetTempName
'Create temporary file in Temp folder
set objTempFile = tempFolderPath.CreateTextFile(strTempFileName)
'Write content from JavaScript files to temporary file
objTempFile.WriteLine(content)
objTempFile.Close

'Open temporary file in Notepad
set objShell = CreateObject("WScript.Shell")
objShell.Run("Notepad.exe " & tempFolderPath & "\" & strTempFileName)


function ReadFile(strFilePath)
    'If file path ends with ".js", we know it is JavaScript file
    if Right(strFilePath, 3) = ".js" then       
        set objFile = objFso.OpenTextFile(strFilePath, 1, false)
        'Read entire contents of a JavaScript file and returns it as a string
        ReadFile = objFile.ReadAll & vbNewLine
        objFile.Close
    else
        'Return empty string
        ReadFile = ""
    end if  
end function
SasHok.Tk
źródło
5

Możesz użyć kompilatora Closure, jak sugeruje orangutancloud. Warto zwrócić uwagę, że tak naprawdę nie musisz kompilować / minimalizować JavaScript, powinno być możliwe po prostu połączenie plików tekstowych JavaScript w jeden plik tekstowy. Po prostu dołącz do nich w kolejności, w jakiej zwykle znajdują się na stronie.

Jim Blackler
źródło
Tak, słuszna uwaga. Kompilator zamykania może być trudny, jeśli Ty lub autorzy wtyczki nie nadążacie za dobrą składnią lub jeśli próbujesz debugować. Ale jeśli używasz go w najbardziej podstawowym trybie, może być pomocny. Osobiście bardzo lubię Dojo i używam ich systemu kompilacji z projektami dojo, naprawdę pomaga utrzymać wszystko w jednym pliku. Ale jest przydatna tylko do wdrażania, a nie do programowania.
Tom Gruner
4

Jeśli używasz PHP, polecam Minify, ponieważ łączy i minifikuje w locie zarówno dla CSS, jak i JS. Po skonfigurowaniu po prostu działa normalnie i dba o wszystko.

technoTarek
źródło
4

Możesz użyć KjsCompiler: https://github.com/knyga/kjscompiler Chłodne zarządzanie zależnościami

Oleksandr Knyga
źródło
Szukałem takich narzędzi od godzin, ale w końcu działa dokładnie tak, jak sobie wyobrażałem, że powinno działać. Proste i zrozumiałe.
Gergely Kovács
2

Możesz użyć skryptu, który zrobiłem. Potrzebujesz jednak JRuby, aby to uruchomić. https://bitbucket.org/ardee_aram/jscombiner (JSCombiner).

Cechą wyróżniającą to jest to, że obserwuje zmiany plików w javascript i automatycznie łączy je z wybranym przez Ciebie skryptem. Nie ma więc potrzeby ręcznego „budowania” skryptu javascript za każdym razem, gdy go testujesz. Mam nadzieję, że to ci pomoże, obecnie tego używam.

Ardee Aram
źródło
0

Może to wymagać trochę wysiłku, ale możesz pobrać mój projekt wiki typu open source z codeplex:

http://shuttlewiki.codeplex.com

Zawiera projekt CompressJavascript (i CompressCSS), który wykorzystuje projekt http://yuicompressor.codeplex.com/ .

Kod powinien być zrozumiały, ale sprawia, że ​​łączenie i kompresowanie plików jest trochę prostsze - i tak dla mnie :)

Projekt ShuttleWiki pokazuje, jak go używać w zdarzeniu po kompilacji.

Eben Roux
źródło