Comment concaténer des fichiers JavaScript en un seul fichier ?

Question

Je veux créer un fichier JavaScript compilé pour mon site Web. Pour le développement, je préférerais conserver le JavaScript dans des fichiers séparés et, dans le cadre de mes scripts automatisés, concaténer les fichiers en un seul et exécuter le compresseur dessus.

Le problème est que si j'utilise l'ancienne commande de copie DOS, elle insère également les marqueurs EOF, ce dont le compresseur se plaint :

copier /A *.js compilé.js /Y

Que font les autres ?

Answer 1

Je recommande d'utiliser Apache Ant et YUI Compressor.

http://ant.apache.org/

http://yui.github.com/yuicompressor/

Mettez quelque chose comme ceci dans le fichier xml de construction Ant. Cela créera deux fichiers, application.js et application-min.js.

<target name="concatenate" description="Concatenate all js files">
    <concat destfile="build/application.js">
        <fileset dir="src/js" includes="*.js" />
    </concat>
</target>

<target name="compress" depends="concatenate" description="Compress application.js to application-min.js">
    <apply executable="java" parallel="false">
        <filelist dir="build" files="application.js" />
        <arg line="-jar" />
        <arg path="path/to/yuicompressor-2.4.2.jar" />
        <srcfile />
        <arg line="-o" />
        <mapper type="glob" from="*.js" to="build/*-min.js" />
        <targetfile />
    </apply>
</target>

Answer 2

Pour copier sans EOF, utilisez le mode binaire :

copy /B *.js compiled.js /Y

Si le fichier résultant a encore des EOFs, cela peut provenir d'un des fichiers originaux, cela peut être corrigé par cette variante :

copy /A *.js compiled.js /B /Y

/A supprime les EOF de fin des fichiers originaux s'il y en a et /B empêche l'ajout de EOF au fichier résultant. Si un EOF n'est pas à la fin, le fichier source sera tronqué à cet endroit. L'ordre des commutateurs est important. Si vous écrivez

copy /A *.js /B compiled.js /Y  

- Les EOFs dans les fichiers sources ne seront pas supprimés mais les EOFs résultants ne seront pas ajoutés.

Essayez vous-même, c'est là que je l'obtiens. Les commandes DOS sont bizarres.

Answer 3

Dans asp.net AJAX, vous pouvez utiliser la balise 'CompositeScript'. Cela combinera tous vos scripts en 1 gros fichier js, économisant la bande passante en réduisant le nombre de http 304 et éventuellement de http 401.

Un échantillon :

 <asp:ScriptManager ID="ScriptManager1" runat="server">
        <CompositeScript>
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/Script1.js" />
                <asp:ScriptReference Path="~/Scripts/Script2.js" />
                <asp:ScriptReference Path="~/Scripts/Script3.js" />
            </Scripts>
        </CompositeScript>
    </asp:ScriptManager>

Pour plus d'informations, voir ici : http://msdn.microsoft.com/en-us/library/cc488552.aspx

Answer 4

Nous avons créé un mécanisme composé des éléments suivants :

• minfication (pour js et css)
• agrégation en paquets
• mise en cache (statut http 304)
• envoi des fichiers originaux pour le mode de développement

C'est peut-être trop pour vos besoins, mais pour répondre à votre question sur ce que font les autres, voici comment cela fonctionne :

1. Une demande arrive à, disons, /css.aspx?package=core
2. Nous recherchons le nom de l'emballage dans un fichier de configuration xml (que par exemple, déclare que le paquet "core" contient les fichiers /js/mootools.js et /js/swfobject.js).
3. Nous vérifions si la minification est activée. Par exemple, dans un environnement de développement, nous ne voulons pas voulons pas que le contenu js minifié soit servi, mais plutôt écrire les fichiers originaux. Pour les js, cela se fait par document.writes de script et pour css nous écrivons des règles d'importation.
4. Si la minification est nécessaire (dans l'environnement de production), nous vérifions l'en-tête if-modified-since de la demande. Si ce client a déjà le contenu minifié, nous envoyons l'en-tête http 304. Si le client a besoin du contenu, nous vérifions si nous avons le contenu minifié dans le cache et le servons. Sinon, nous réduisons le contenu et envoyons le résultat.

Tout cela est réparti dans des services distincts. Il y a un service de cache injecté dans le service jsminificationwriter. Il utilise le service de minification original qui s'occupe uniquement des règles de minification.

Ce qui est bien dans cette approche, c'est que :

• Il oblige nos équipes de développement à penser en "paquets" js/css et donc à diviser correctement les fonctionnalités et à les répartir sur les pages qui en ont besoin.
• Pendant le développement, vous êtes parfaitement capable de déboguer, en obtenant les fichiers et les numéros de ligne appropriés.
• Vous pouvez brancher n'importe quelle autre implémentation de service de minification comme YUI et ainsi de suite. JsMin n'était que notre première prise.
• Il s'agit d'une approche générale qui fonctionne pour différents types de contenu.

J'espère que cela vous aidera. Je peux poster quelques fragments de code pour illustrer davantage si vous le souhaitez.

Answer 5

Je vais seconder yuicompressor, mais j'utilise /packer/

http://johannburkard.de/blog/programming/javascript/automate-javascript-compression-with-yui-compressor-and-packer.html

Ça a été vraiment excellent pour moi.