Как объединить файлы JavaScript в один файл?

Question

Я хочу создать скомпилированный файл JavaScript для моего сайта. Для разработки я бы предпочел хранить JavaScript в отдельных файлах и просто как часть моих автоматических сценариев объединять файлы в один и запускать над ним компрессор.

Моя проблема в том, что, если я использую старую команду копирования DOS, она также добавляет маркеры EOF, на которые жалуется компрессор:

copy / A * .js compiled.js / Y

Что делают другие люди?

Answer 1

Я рекомендую использовать Apache Ant и YUI Compressor.

http://ant.apache.org/

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

Поместите что-то вроде этого в сборку Ant xml. Он создаст два файла, application.js и 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

Для копирования без EOF используйте двоичный режим:

copy /B *.js compiled.js /Y

Если в результирующем файле все еще есть EOF, это могло бы быть из одного из оригинальных файлов, это можно исправить этим вариантом:

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

/ A удаляет конечные EOF из исходных файлов, если таковые имеются, и / B предотвращает добавление EOF в результирующий файл. Если EOF не в конце, исходный файл будет усечен в нем. Порядок переключателей важен. Если ты пишешь

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

- EOF в исходных файлах не будут удалены, но результат EOF не будет добавлен.

Попробуй сам, вот где я это понял. Команды DOS странные.

Answer 3

В asp.net AJAX вы можете использовать тег 'CompositeScript'. Это объединит все ваши сценарии в 1 большой файл js, что позволит сэкономить пропускную способность за счет уменьшения числа http 304 и, возможно, http 401.

Пример:

 <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>

Подробнее см. Здесь: http://msdn.microsoft.com/en-us/library/cc488552.aspx

Answer 4

Установите компрессор uglifyjs на вашу машину:

sudo npm -g install uglify-js

Тогда следующая команда может быть использована для объединения и сжатия всех файлов js.

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

Answer 5

Это очень старый вопрос, но я хочу упомянуть, что существуют также способы объединения javascript с использованием javascript! с nodejs очевидно ... Например, есть инструменты, опубликованные в виде модулей npm, таких как this и есть также grunt и gulp плагинов.

Я также хочу упомянуть ОЧЕНЬ, ОЧЕНЬ интересную технику, которая используется в таких огромных проектах, как jQuery и Modernizr. Оба этих проекта полностью разработаны с использованием модулей requirejs, а затем они используют оптимизатор requirejs в качестве очень умного конкатенатора. Интересно, что, как видите, ни jQuery, ни Modernizr не нуждаются в работе requirejs, и это происходит потому, что они стирают синтетический ритуал requirejs, чтобы избавиться от requirejs в их коде. Таким образом, они заканчивают автономной библиотекой, которая была разработана с модулями requirejs !. Благодаря этому они могут выполнять сборки своих библиотек, помимо прочих преимуществ. Здесь - это запись в блоге, которая объясняет все это более подробно.

Answer 6

Мы создали механизм, состоящий из следующих частей:

• минификация (для js и css)
• агрегация в пакетах
• кэширование (http статус 304 материала)
• отправка оригинальных файлов в режиме разработки

Это может быть слишком много для ваших нужд, но чтобы ответить на ваш вопрос, что делают другие, вот как это работает:

1. Запрос приходит, скажем, /css.aspx?package=core
2. Мы выполняем поиск имени пакета в файле конфигурации xml (который например, заявляет, что пакет "core" содержит файлы /js/mootools.js и /js/swfobject.js)
3. Мы проверяем, включена ли минификация. Например, в среда разработки мы не хотите, чтобы минимизированное содержание JS было подан, но вместо этого напишите оригинальные файлы. Для JS это сделано по document.writes скрипта включает в себя, и для CSS мы пишем правила импорта.
4. Если требуется минимизация (в рабочей среде), мы проверяем заголовок if -ified-Since из запроса. Если этот клиент уже имеет минимизированное содержимое, мы отправляем HTTP-заголовок 304. Если клиенту действительно требуется содержимое, мы проверяем, минимизировали ли мы содержимое в кэше, и обслуживаем его. В противном случае мы минимизируем и отправляем результат.

Все это разбито на отдельные службы. В службу jsminificationwriter добавлена ​​служба кэширования. Для этого используется оригинальный сервис минификации, который заботится исключительно о правилах минификации.

Что хорошо в этом подходе:

• Это заставляет наши команды разработчиков думать в «пакетах» js / css и, следовательно, правильно разделять функциональные возможности и распределять их по страницам, которые в них нуждаются.
• Во время разработки вы отлично можете отлаживать, получать правильные файлы и номера строк.
• Вы можете подключить любую другую реализацию сервиса минификации, такую ​​как YUI и т. Д. JsMin был только нашим первым дублем.
• Это общий подход, который работает для разных типов контента.

Надеюсь, это поможет. Я могу опубликовать некоторые фрагменты кода, чтобы проиллюстрировать это больше, если хотите.

Answer 7

Я буду вторым yuicompressor, но я использую / packer /

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

Это было действительно отлично для меня.

Answer 8

Вы также можете сделать:

type *.js > compiled.js

Answer 9

Вы также можете попробовать wro4j (оптимизатор веб-ресурсов для Java), который можно использовать в качестве инструмента сборки (плагин maven), решения времени выполнения (с использованием фильтра) или инструмента командной строки. Это позволяет вам легко организовывать ресурсы и обрабатывать слияния для вас, используя дюжину компрессоров для ресурсов типов ботов: js и css.

Определение ресурсов для объединения легко как:

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

Отказ от ответственности: я участник этого проекта.