web-dev-qa-db-fra.com

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

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

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

copy/A * .js compiled.js/Y

Que font les autres?

javascriptbatch-filecompression
35
Phil Hannent

Je recommande d'utiliser Apache Ant et YUI Compressor.

http://ant.Apache.org/

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

Mettez quelque chose comme ceci dans Ant build xml . Il 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>
35
David Brockman

Pour copier sans EOF, utilisez le mode binaire:

copy /B *.js compiled.js /Y

Si le fichier résultant contient toujours des EOF, cela peut provenir d'un des fichiers d'origine, Il peut être corrigé avec cette variante:

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

/ A supprime les fichiers EOF de fin des fichiers d'origine, le cas échéant, et/B empêche d'ajouter EOF au fichier obtenu. Si un EOF n'est pas à la fin, le fichier source sera tronqué. L'ordre des commutateurs est important. Si vous écrivez 

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

- Les fichiers EOF des fichiers source ne seront pas supprimés, mais le résultat EOF ne sera pas ajouté. 

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

11
eugensk00

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

É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

6
Punit Vora

Installez le compresseur uglifyjs sur votre machine:

Sudo npm -g install uglify-js

Ensuite, la commande suivante peut être utilisée pour concaténer et compresser tous les fichiers js.

cat myAppDir/*.js | uglifyjs > build/application.js
5
Fergal

C'est une très vieille question, mais je tiens à mentionner qu'il existe également des moyens de concaténer javascript à l'aide de javascript! avec nodejs évidemment ... Par exemple, il existe des outils publiés sous la forme de modules npm tels que this et des plugins grunt et gulp .

Je souhaite également mentionner une technique TRÈS intéressante qui est utilisée dans d’immenses projets tels que jQuery et Modernizr. Ces deux projets sont entièrement développés avec les modules requirejs, puis utilisent l’optimiseur requirejs comme un concaténateur très intelligent. La chose intéressante est que, comme vous pouvez le constater, ni jQuery ni Modernizr n’ont besoin de Requins pour fonctionner, et c’est parce qu’ils effacent le rituel syntatique Requis afin de se débarrasser de Requis dans leur code. Ils se retrouvent donc avec une bibliothèque autonome développée avec les modules requirejs !. Grâce à cela, ils peuvent, entre autres avantages, créer des versions sur mesure de leurs bibliothèques. Here est un article de blog qui explique tout cela plus en détail.

4
Augusto Altman Quaranta

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

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

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

  1. Une demande arrive par exemple à /Css.aspx? Package = core
  2. Nous effectuons une recherche du nom de fichier dans un fichier de configuration xml (qui, 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 que le contenu js minifié soit servi Mais écrivons les fichiers Originaux. Ceci est fait pour jsPar document.writes de script Includes, et pour css, nous écrivons des règles d'importation.
  4. Si une minification est requise (dans l'environnement de production), nous vérifions l'en-tête if-modified-since de la requête. Si ce client a déjà le contenu minifié, nous envoyons l'en-tête http 304. Si le client requiert le contenu, nous vérifions si nous avons du contenu minisé dans le cache et le servons. Sinon, nous minimisons et envoyons le résultat.

Tout cela est divisé en services séparés. Un service de cache est injecté dans le service jsminificationwriter. Ceci utilise le service de minification original qui ne prend en charge que les règles de minification.

Ce qui est bien dans cette approche est:

  • Cela oblige nos équipes de développement à penser aux "packages" js/css et donc à bien répartir les fonctionnalités et à les répartir sur les pages qui les nécessitent.
  • Pendant le développement, vous êtes parfaitement en mesure de déboguer, d’obtenir les fichiers et les numéros de ligne appropriés.
  • Vous pouvez connecter toute autre implémentation de service de minification telle que YUI, etc. JsMin n'était que notre première prise.
  • C'est une approche générale qui fonctionne pour différents types de contenu.

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

4
Martin Kool

Vous pouvez aussi faire:

type *.js > compiled.js
3
PhiLho

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

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

Cela a été vraiment excellent pour moi.

3
annakata

Vous pouvez également essayer wro4j (optimiseur de ressources Web pour Java), qui peut être utilisé comme outil de construction (plug-in maven), solution d’exécution (avec filtre) ou outil de ligne de commande. Il vous permet de garder facilement les ressources organisées et de gérer la fusion en utilisant une douzaine de compresseurs pour les ressources de types bot: js et css.

Définir les ressources à fusionner est simple:

<groups xmlns="http://www.isdc.ro/wro">
  <group name="all">
    <css>/asset/*.css</css>
    <js>/asset/*.js</js>
  </group>
</groups>

Disclaimer: Je suis un auteur de ce projet.

0
Alex Objelean