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

Ответ 1

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

http://ant.apache.org/

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

Поместите что-то подобное в Ant build 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>

Ответ 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 странны.

Ответ 3

В asp.net AJAX вы можете использовать тег "CompositeScript". Это объединит все ваши скрипты в один большой файл 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

Ответ 4

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

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

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

• Запрос приходит, скажем, /css.aspx?package=core
• Мы просматриваем файл packagename в файле конфигурации xml (который например, заявляет, что пакет "ядро" содержит файлы /js/mootools.js и /js/swfobject.js)
• Мы проверяем, включена ли минификация. Например, в среды разработки мы не хотите, чтобы содержимое minified js подал, но вместо этого написал исходные файлы. Для js это сделано по document.writes script включает, и для css мы пишем правила импорта.
• Если требуется минимизация (в процессе производства env), мы делаем проверку заголовка if-modified-since из запроса. Если у этого клиента уже есть миниатюрный контент, мы отправляем http-заголовок 304. Если клиент действительно требует содержимого, мы проверяем, было ли у нас минимальное содержимое в кеше и его обслуживание. В противном случае мы минимизируем и отправляем результат.

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

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

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

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

Ответ 5

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

sudo npm -g install uglify-js

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

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

Ответ 6

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

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

Ответ 7

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

type *.js > compiled.js

Ответ 8

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

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

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

Ответ 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>  

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