web-dev-qa-db-fra.com

Combinez plusieurs fichiers JavaScript dans un fichier JS

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?

javascriptjqueryjquery-ui
85
Chandrasekhar

Sur 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 pour que le script résultant soit également compressé.

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

Il suffit de combiner les fichiers texte et d'utiliser ensuite quelque chose comme YUI Compressor .

Les fichiers peuvent être facilement combinés à l’aide de la commande cat *.js > main.js et main.js peuvent ensuite être exécutés 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 Gulp pour la concaténation et la compression javascript, comme avec divers plugins et une configuration minimale. Vous pouvez notamment configurer des dépendances, compiler du coffeescript, etc., ainsi que compresser votre JS.

18
Prydie

Essayez le compilateur de fermeture google:

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

15
Tom Gruner

Vous pouvez le faire via

  • a. Manually: copie de tous les fichiers Javascript en un, lancez un compresseur dessus ( facultatif mais recommandé ) et chargez au serveur et un lien vers ce fichier.
  • b. Utilisez PHP: Créez simplement un tableau de tous les fichiers JS et include tous et exportez-le dans un <script> tag
11
Gary Green

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

Par rapport aux scripts ci-dessus, il présente l'avantage d'être très simple à utiliser. Un gros avantage est que vous pouvez répertorier les fichiers js que vous souhaitez fusionner dans un fichier texte d'entrée et non dans la ligne de commande. Votre liste est donc réutilisable. vous n'avez pas à le taper chaque fois que vous souhaitez fusionner vos fichiers. C'est très pratique puisque vous allez répéter cette étape à chaque fois que vous souhaitez passer en production. Vous pouvez également commenter des fichiers que vous ne souhaitez pas fusionner dans la liste. La ligne de commande que vous tapez le plus probablement est la suivante:

$ 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.js minifié 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 très utile pour un site Web simple.

8
eloone

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)

Puis tu cours:

make compile

J'espère que ça aide.

8
user339827

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

7
Capsule

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 fonctionnera uniquement sur les fenêtres.

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
7
SasHok.Tk

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 pour compiler/minimiser le JavaScript, il devrait être possible de simplement concaténer les fichiers texte JavaScript dans un fichier. fichier texte unique. Joignez-les simplement dans l'ordre dans lequel ils sont normalement inclus dans la page.

5
Jim Blackler

Vous pouvez utiliser KjsCompiler: https://github.com/knyga/kjscompiler Cool gestion des dépendances

4
Oleksandr Knyga

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é, il vous suffit de travailler comme d'habitude et tout est réglé.

4
technoTarek

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

Ce qui le distingue, c'est qu'il surveille les modifications de fichier dans le javascript et le 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.

2
Ardee Aram

Cela peut prendre 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 rend la combinaison et la compression des fichiers un peu simnpler --- pour moi en tout cas :)

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

0
Eben Roux