Combinar varios archivos JavaScript en un archivo JS [cerrado]

91

Estoy usando jquery en mi aplicación web y necesito cargar más archivos de script jquery en una sola página.

Google sugirió que combine todos los archivos de script jquery en un solo archivo.

¿Cómo puedo hacer esto?

javascript jquery jquery-ui

— Chandrasekhar
fuente

53

En Linux, puede usar un script de shell simple https://github.com/dfsq/compressJS.sh para combinar varios archivos javascript en uno solo. Hace uso del servicio en línea Closure Compiler, por lo que el script resultante también se comprime de manera efectiva.

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

— dfsq
fuente

1

¿Podría funcionar esto con manillares?

— Dan Baker

3

Es mejor usar un administrador de tareas como Grunt, Gulp y otras cosas así que lo hacen automáticamente. Usando Grunt compilo mis manubrios, mecanografiados, en una carpeta generada, luego copio los archivos js / css en la carpeta generada también, al final también minifico en un archivo js todos los archivos .js y en un archivo css todos los archivos .css. Y tengo un observador que vuelve a ejecutar esa configuración en el cambio de archivo para que pueda guardar un archivo y actualizar el navegador y todos los cambios se han aplicado en 1-3 segundos.

— Vadorequest

19

Prueba el compilador de cierre de Google:

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

— Tom Gruner
fuente

18

Simplemente combine los archivos de texto y luego use algo como el compresor YUI .

Los archivos se pueden combinar fácilmente usando el comando cat *.js > main.jsy main.js se puede ejecutar a través del compresor YUI usando java -jar yuicompressor-x.y.z.jar -o main.min.js main.js.

Actualización de agosto de 2014

Ahora he migrado para usar Gulp para la concatenación y compresión de JavaScript, ya que con varios complementos y una configuración mínima puede hacer cosas como configurar dependencias, compilar coffeescript, etc., así como comprimir su JS.

— Prydie
fuente

1

Corregido @reformado.

— Prydie

11

Puedes hacer esto a través de

a. Manualmente: copie todos los archivos Javascript en uno, ejecute un compresor ( opcional pero recomendado ) y cárguelo en el servidor y enlace a ese archivo.
segundo. Use PHP: simplemente cree una matriz de todos los archivos JS y includetodos ellos y genere una <script>etiqueta

— Gary Green
fuente

1

No se recomienda la opción B porque hace que su navegador realice muchas solicitudes para todos los archivos .js individuales pequeños (lento) en lugar de solo una solicitud para un archivo .js más grande (más rápido).

— Mikepote

5

@Mikepote, sí ... de ahí que utilicé la palabra includees decir, no hagas <script src = "...."> vincular a varios archivos, solo inclúyelos en un elemento de script. Lo ideal sería utilizar un cdn junto con el almacenamiento en caché adecuado.

— Gary Green

Ah, lo siento, leí mal tu respuesta.

— Mikepote

3

¿Puede dar algún ejemplo aquí?

— Anand Solanki

Es mejor usar readfile () para evitar la sobrecarga de análisis y obtener algo interpretado accidentalmente.

— Chinoto Vokro

9

Normalmente lo tengo en 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)

Entonces corres:

make compile

Espero que ayude.

8

Utilizo este script de shell en Linux https://github.com/eloone/mergejs .

En comparación con los scripts anteriores, tiene la ventaja de ser muy simple de usar, y una gran ventaja es que puede enumerar los archivos js que desea fusionar en un archivo de texto de entrada y no en la línea de comando, por lo que su lista es reutilizable y no tiene que escribirlo cada vez que desee fusionar sus archivos. Es muy útil, ya que repetirá este paso cada vez que desee pasar a producción. También puede comentar archivos que no desea combinar en la lista. La línea de comando que probablemente escribiría es:

$ mergejs js_files_list.txt output.js

Y si también desea comprimir el archivo combinado resultante:

$ mergejs -c js_files_list.txt output.js

Esto creará output-min.jsminificado por el compilador de cierre de Google. O bien:

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

Si desea un nombre específico para su archivo minificado llamado output.minified.js

Lo encuentro realmente útil para un sitio web simple.

— eloone
fuente

7

La agrupación de scripts es contraproducente, debe cargarlos en paralelo usando algo como http://yepnopejs.com/ o http://headjs.com

— Cápsula
fuente

5

Hay razones válidas para combinar archivos javascript. Por un lado, es muy posible que solicitar 20 archivos de 2 kb lleve más tiempo que solicitar un archivo de 40 kb.

— Joel B

1

¿Qué pasa cuántas veces por milenio?

— cápsula

4

Más a menudo de lo que piensas. Eche un vistazo incluso al código fuente de stackoverflow: "... La opción B no se recomienda porque hace que su navegador realice muchas solicitudes para todos los archivos .js individuales pequeños (lentos) en lugar de solo una solicitud para un .js más grande archivo (más rápido) ".

— Joel B

4

@Capsule Odio decírselo, pero Internet se está moviendo rápidamente de jQuery a MVC JavaScript, cargar un archivo siempre será más rápido que disparar múltiples solicitudes HTTP.

— Foxhoundn

1

@ Foxhoundn Internet también se está moviendo rápidamente a HTTP2, por lo que realmente ya no importará. De todos modos, jQuery fue solo un ejemplo, podría enfrentar exactamente el mismo problema con MVC JS

— Capsule

7

Copie este script en el bloc de notas y guárdelo como archivo .vbs. Arrastre y suelte archivos .js en este script.

PD. Esto funcionará solo en 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

— SasHok.Tk
fuente

5

Puede usar el compilador Closure como sugiere orangutancloud. Vale la pena señalar que en realidad no es necesario compilar / minificar JavaScript, debería ser posible simplemente concatenar los archivos de texto JavaScript en un solo archivo de texto. Únase a ellos en el orden en que normalmente se incluyen en la página.

— Jim Blackler
fuente

Sí, buen punto. El compilador de cierre puede ser complicado si usted o los autores del complemento no se mantienen al día con una buena sintaxis, o si están tratando de depurar. Pero si lo usa en el modo más básico, puede ser útil. Personalmente, me gusta mucho Dojo y uso su sistema de compilación con proyectos de Dojo, realmente ayuda a mantener todo en un solo archivo. Pero solo es útil para la implementación, no para el desarrollo.

— Tom Gruner

4

Si está ejecutando PHP, recomiendo Minify porque combina y minimiza sobre la marcha tanto para CSS como para JS. Una vez que lo hayas configurado, simplemente funciona con normalidad y se encarga de todo.

— technoTarek
fuente

4

Puede utilizar KjsCompiler: https://github.com/knyga/kjscompiler Gestión de dependencias geniales

— Oleksandr Knyga
fuente

He estado buscando herramientas como esta durante horas, pero finalmente funciona exactamente como imaginé que debería funcionar. Sencillo y sencillo.

— Gergely Kovács

2

Puedes usar un guión que hice. Sin embargo, necesitas JRuby para ejecutar esto. https://bitbucket.org/ardee_aram/jscombiner (JSCombiner).

Lo que distingue a esto es que observa los cambios de archivos en javascript y los combina automáticamente con el script de su elección. Así que no es necesario "construir" manualmente su javascript cada vez que lo prueba. Espero que te ayude, actualmente estoy usando esto.

— Ardee Aram
fuente

0

Esto puede ser un poco de esfuerzo, pero puede descargar mi proyecto wiki de código abierto desde codeplex:

http://shuttlewiki.codeplex.com

Contiene un proyecto CompressJavascript (y CompressCSS) que usa http://yuicompressor.codeplex.com/ proyecto .

El código debería ser autoexplicativo, pero hace que combinar y comprimir los archivos sea un poco más sencillo --- para mí de todos modos :)

El proyecto ShuttleWiki muestra cómo usarlo en el evento posterior a la compilación.

— Eben Roux
fuente