it-swarm.com.ru

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

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

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

copy/A * .js compiled.js/Y

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

35
Phil Hannent

Я рекомендую использовать 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>
35
David Brockman

Для копирования без 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 странные.

11
eugensk00

В 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

6
Punit Vora

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

Sudo npm -g install uglify-js

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

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

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

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

4
Augusto Altman Quaranta

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

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

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

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

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

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

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

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

4
Martin Kool

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

type *.js > compiled.js
3
PhiLho

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

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

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

3
annakata

Вы также можете попробовать 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>  

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

0
Alex Objelean