Combinez plusieurs fichiers JavaScript en un seul fichier JS [fermé]

J'utilise jquery dans mon application Web et je dois charger plus de fichiers de script jquery sur une seule page.

Google m'a suggéré de combiner tous les fichiers de script jquery en un seul fichier.

Comment puis-je faire ceci?

Sous Linux, vous pouvez utiliser un simple script shell https://github.com/dfsq/compressJS.sh pour combiner plusieurs fichiers javascript en un seul. Il utilise le service en ligne Closure Compiler afin que le script résultant soit également compressé efficacement.

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

Essayez le compilateur de fermeture google:

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

Combinez simplement les fichiers texte, puis utilisez quelque chose comme YUI Compressor .

Les fichiers peuvent être facilement combinés à l'aide de la commande cat *.js > main.jset main.js peut ensuite être exécuté via le compresseur YUI à l'aide de java -jar yuicompressor-x.y.z.jar -o main.min.js main.js.

Mise à jour août 2014

J'ai maintenant migré vers l'utilisation de Gulp pour la concaténation et la compression javascript, car avec divers plugins et une configuration minimale, vous pouvez faire des choses comme configurer des dépendances, compiler coffeescript, etc. ainsi que compresser votre JS.

Vous pouvez le faire via

• une. Manuellement: copiez tous les fichiers Javascript en un seul, exécutez un compresseur dessus ( facultatif mais recommandé ) et téléchargez sur le serveur et créez un lien vers ce fichier.
• b. Utilisez PHP: créez simplement un tableau de tous les fichiers JS et de tous les fichiers et includeexportez-les dans une <script>balise

Je l'ai généralement sur 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)

Ensuite, vous exécutez:

make compile

J'espère que cela aide.

J'utilise ce script shell sur Linux https://github.com/eloone/mergejs .

Comparé aux scripts ci-dessus, il a l'avantage d'être très simple à utiliser, et un gros avantage est que vous pouvez lister les fichiers js que vous souhaitez fusionner dans un fichier texte d'entrée et non dans la ligne de commande, donc votre liste est réutilisable et vous n'avez pas à le saisir à chaque fois que vous souhaitez fusionner vos fichiers. C'est très pratique car vous répéterez cette étape chaque fois que vous voudrez passer en production. Vous pouvez également commenter les fichiers que vous ne souhaitez pas fusionner dans la liste. La ligne de commande que vous tapez le plus probablement est:

$ mergejs js_files_list.txt output.js

Et si vous souhaitez également compresser le fichier fusionné résultant:

$ mergejs -c js_files_list.txt output.js

Cela créera output-min.jsminifié par le compilateur de fermeture de Google. Ou :

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

Si vous voulez un nom spécifique pour votre fichier minifié nommé output.minified.js

Je trouve cela vraiment utile pour un site Web simple.

Le regroupement de scripts est contre-productif, vous devez les charger en parallèle en utilisant quelque chose comme http://yepnopejs.com/ ou http://headjs.com

Copiez ce script dans le bloc-notes et enregistrez-le en tant que fichier .vbs. Faites glisser et déposez les fichiers .js sur ce script.

ps. Cela ne fonctionnera que sur 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

Vous pouvez utiliser le compilateur Closure comme le suggère orangutancloud. Il est intéressant de noter que vous n'avez pas réellement besoin de compiler / réduire le JavaScript, il devrait être possible de simplement concaténer les fichiers texte JavaScript en un seul fichier texte. Rejoignez-les simplement dans l'ordre dans lequel ils sont normalement inclus dans la page.

Si vous utilisez PHP, je recommande Minify car il combine et réduit à la volée pour CSS et JS. Une fois que vous l'avez configuré, travaillez comme d'habitude et il s'occupe de tout.

Vous pouvez utiliser KjsCompiler: https://github.com/knyga/kjscompiler Cool dependency management

Vous pouvez utiliser un script que j'ai créé. Vous avez besoin de JRuby pour exécuter cela. https://bitbucket.org/ardee_aram/jscombiner (JSCombiner).

Ce qui le distingue, c'est qu'il surveille les modifications de fichiers dans le javascript et les combine automatiquement au script de votre choix. Il n'est donc pas nécessaire de "construire" manuellement votre javascript à chaque fois que vous le testez. J'espère que cela vous aidera, je l'utilise actuellement.

Cela peut être un peu d'effort mais vous pouvez télécharger mon projet wiki open-source à partir de codeplex:

http://shuttlewiki.codeplex.com

Il contient un projet CompressJavascript (et CompressCSS) qui utilise le projet http://yuicompressor.codeplex.com/ .

Le code devrait être explicite mais cela simplifie un peu la combinaison et la compression des fichiers --- pour moi en tout cas :)

Le projet ShuttleWiki montre comment l'utiliser dans l'événement post-build.