Combina più file JavaScript in un unico file JS

Sto usando jquery nella mia applicazione web e ho bisogno di caricare più file di script jquery in una singola pagina.

Google ha suggerito di unire tutti i file di script jquery in un singolo file.

Come posso fare questo?

Su Linux è ansible utilizzare lo script di shell semplice https://github.com/dfsq/compressJS.sh per combinare più file javascript nel singolo. Utilizza il servizio online Closure Compiler in modo che anche lo script risultante venga effettivamente compresso.

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

Basta combinare i file di testo e quindi utilizzare qualcosa come il compressore YUI .

I file possono essere facilmente combinati usando il comando cat *.js > main.js e main.js possono quindi essere eseguiti tramite il compressore YUI usando java -jar yuicompressor-xyzjar -o main.min.js main.js

Aggiornamento agosto 2014

Ora sono passato all’utilizzo di Gulp per la concatenazione e la compressione di javascript, come con vari plugin e alcune configurazioni minime, puoi fare cose come impostare dipendenze, compilare coffeescript ecc. E anche comprimere il tuo JS.

Prova il compilatore di chiusura di google:

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

Puoi farlo via

  • un. Manualmente: copia di tutti i file Javascript in uno, esegui un compressore su di esso ( opzionale ma consigliato ) e carica sul server e collega a quel file.
  • b. Usa PHP: basta creare una matrice di tutti i file JS e include tutti e produrre in un tag

Di solito l’ho su un 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) 

Quindi corri:

 make compile 

Spero possa essere d’aiuto.

Io uso questo script di shell su Linux https://github.com/loone/mergejs .

Rispetto agli script di cui sopra ha i vantaggi di essere molto semplice da usare, e un grande vantaggio è che è ansible elencare i file js che si desidera unire in un file di testo di input e non nella riga di comando, quindi l’elenco è riutilizzabile e non è necessario digitarlo ogni volta che si desidera unire i file. È molto utile poiché ripeterete questo passaggio ogni volta che volete entrare in produzione. Puoi anche commentare i file che non vuoi unire nella lista. La riga di comando che probabilmente useresti è:

 $ mergejs js_files_list.txt output.js 

E se vuoi anche comprimere il file unito risultante:

 $ mergejs -c js_files_list.txt output.js 

Questo creerà output-min.js dal compilatore di chiusura di Google. O :

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

Se si desidera un nome specifico per il file output.minified.js denominato output.minified.js

Trovo davvero utile per un semplice sito web.

Il raggruppamento degli script è controproducente, dovresti caricarli in parallelo usando qualcosa come http://yepnopejs.com/ o http://headjs.com

Copia questo script nel blocco note e salva come file .vbs. Trascina e rilascia i file .js su questo script.

ps. Funzionerà solo su 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 

Puoi usare il compilatore Closure come suggerisce l’orangutancloud. Vale la pena ricordare che in realtà non è necessario compilare / minificare il JavaScript, dovrebbe essere ansible semplicemente concatenare i file di testo JavaScript in un singolo file di testo. Unisciti a loro nell’ordine in cui sono normalmente inclusi nella pagina.

Se stai usando PHP, consiglio Minify perché combina e minimizza al volo sia per CSS che per JS. Una volta configurato, funziona normalmente e si occupa di tutto.

Puoi utilizzare KjsCompiler: https://github.com/knyga/kjscompiler Gestione della dipendenza fredda

Puoi usare uno script che ho creato. Hai bisogno di JRuby per eseguire questo però. https://bitbucket.org/ardee_aram/jscombiner (JSCombiner).

Ciò che distingue questo è che guarda le modifiche dei file in javascript e lo combina automaticamente con lo script di tua scelta. Quindi non c’è bisogno di “build” manualmente il tuo javascript ogni volta che lo provi. Spero che ti aiuti, sto attualmente usando questo.

Potrebbe essere un po ‘impegnativo, ma potresti scaricare il mio progetto wiki open-source da codeplex:

http://shuttlewiki.codeplex.com

Contiene un progetto CompressJavascript (e CompressCSS) che utilizza il progetto http://yuicompressor.codeplex.com/ .

Il codice dovrebbe essere auto-esplicativo, ma rende la combinazione e la compressione dei file un po ‘più semplice — per me comunque 🙂

Il progetto ShuttleWiki mostra come usarlo nell’evento post-build.