Kombinieren Sie mehrere JavaScript-Dateien zu einer JS-Datei [geschlossen]

Ich verwende jquery in meiner Webanwendung und muss mehr jquery-Skriptdateien auf eine einzelne Seite laden.

Google schlug vor, alle JQuery-Skriptdateien in einer einzigen Datei zu kombinieren.

Wie kann ich das machen?

Unter Linux können Sie das einfache Shell-Skript https://github.com/dfsq/compressJS.sh verwenden , um mehrere Javascript-Dateien zu einer einzigen zu kombinieren. Es nutzt den Onlinedienst Closure Compiler, sodass das resultierende Skript auch effektiv komprimiert wird.

$ ./compressJS.sh some-script.js another-sctipt.js onemore.js

Probieren Sie den Google Closure Compiler aus:

http://code.google.com/closure/compiler/docs/gettingstarted_ui.html

Kombinieren Sie einfach die Textdateien und verwenden Sie dann so etwas wie den YUI-Kompressor .

Dateien können einfach mit dem Befehl kombiniert werden cat *.js > main.jsund main.js kann dann mit dem YUI-Kompressor ausgeführt werden java -jar yuicompressor-x.y.z.jar -o main.min.js main.js.

Update August 2014

Ich bin jetzt auf die Verwendung von Gulp für die Verkettung und Komprimierung von Javascript umgestiegen, da Sie mit verschiedenen Plugins und einigen minimalen Konfigurationen beispielsweise Abhängigkeiten einrichten, Coffeescript kompilieren usw. sowie Ihre JS komprimieren können.

Sie können dies über tun

• ein. Manuell: Kopieren Sie alle Javascript-Dateien in eine, führen Sie einen Kompressor darauf aus ( optional, aber empfohlen ) und laden Sie sie auf den Server hoch und verknüpfen Sie sie mit dieser Datei.
• b. Verwenden Sie PHP: Erstellen Sie einfach ein Array aller JS-Dateien und includealler und geben Sie sie in ein <script>Tag aus

Ich habe es normalerweise auf einem 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)

Dann rennst du:

make compile

Ich hoffe, es hilft.

Ich verwende dieses Shell-Skript unter Linux https://github.com/eloone/mergejs .

Im Vergleich zu den oben genannten Skripten hat es den Vorteil, dass es sehr einfach zu verwenden ist. Ein großes Plus ist, dass Sie die JS-Dateien, die Sie zusammenführen möchten, in einer Eingabetextdatei und nicht in der Befehlszeile auflisten können, sodass Ihre Liste wiederverwendbar ist Sie müssen es nicht jedes Mal eingeben, wenn Sie Ihre Dateien zusammenführen möchten. Dies ist sehr praktisch, da Sie diesen Schritt jedes Mal wiederholen, wenn Sie in die Produktion gehen möchten. Sie können auch Dateien kommentieren, die Sie nicht in der Liste zusammenführen möchten. Die Befehlszeile, die Sie höchstwahrscheinlich eingeben würden, lautet:

$ mergejs js_files_list.txt output.js

Und wenn Sie auch die resultierende zusammengeführte Datei komprimieren möchten:

$ mergejs -c js_files_list.txt output.js

Dies wird output-min.jsvom Google Closure Compiler minimiert. Oder :

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

Wenn Sie einen bestimmten Namen für Ihre minimierte Datei mit dem Namen möchten output.minified.js

Ich finde es sehr hilfreich für eine einfache Website.

Die Gruppierung von Skripten ist kontraproduktiv. Sie sollten sie parallel über http://yepnopejs.com/ oder http://headjs.com laden

Kopieren Sie dieses Skript in den Editor und speichern Sie es als .vbs-Datei. Ziehen Sie .js-Dateien in dieses Skript und legen Sie sie dort ab.

ps. Dies funktioniert nur unter Windows.

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

Sie können den Closure-Compiler wie von orangutancloud vorgeschlagen verwenden. Es ist erwähnenswert, dass Sie nicht wirklich benötigen zu kompilieren / minify die JavaScript, sollte es möglich sein, einfach die JavaScript - Textdateien in eine einzige Textdatei verketten. Verbinden Sie sie einfach in der Reihenfolge, in der sie normalerweise auf der Seite enthalten sind.

Wenn Sie PHP ausführen , empfehle ich Minify, da es sowohl für CSS als auch für JS im laufenden Betrieb kombiniert und minimiert wird. Sobald Sie es konfiguriert haben, arbeiten Sie einfach wie gewohnt und es kümmert sich um alles.

Sie können KjsCompiler verwenden: https://github.com/knyga/kjscompiler Cooles Abhängigkeitsmanagement

Sie können ein Skript verwenden, das ich erstellt habe. Sie benötigen JRuby, um dies auszuführen. https://bitbucket.org/ardee_aram/jscombiner (JSCombiner).

Das Besondere daran ist, dass es Dateiänderungen im Javascript überwacht und diese automatisch mit dem Skript Ihrer Wahl kombiniert. Sie müssen Ihr Javascript also nicht jedes Mal manuell "erstellen", wenn Sie es testen. Hoffe es hilft dir weiter, ich benutze das gerade.

Dies mag ein bisschen mühsam sein, aber Sie können mein Open-Source-Wiki-Projekt von Codeplex herunterladen:

http://shuttlewiki.codeplex.com

Es enthält ein CompressJavascript-Projekt (und CompressCSS), das das Projekt http://yuicompressor.codeplex.com/ verwendet .

Der Code sollte selbsterklärend sein, aber es macht das Kombinieren und Komprimieren der Dateien ein bisschen einfacher --- für mich jedenfalls :)

Das ShuttleWiki-Projekt zeigt, wie es im Post-Build-Ereignis verwendet wird.