Объединение файлов JS и CSS как часть сборки - PullRequest
5 голосов
/ 16 сентября 2011

Я хочу объединить все мои JS-файлы до , чтобы уменьшить количество HTTP-запросов , которые браузер отправляет на мой веб-сайт.Конечно, все еще стоит хранить эти файлы отдельно во время разработки.Широко признанным решением является выполнение конкатенации как части сборки.

Часть конкатенации довольно проста ... но как насчет всех файлов HTML, которые все еще имеют набор тегов <script src="*.js">, ссылающихся на пресцепленные файлы JS?Теперь им нужно указать на один сцепленный файл javascript.

Как я могу поменять эти ссылки как часть сборки?

Ответы [ 6 ]

4 голосов
/ 16 сентября 2011

Решение на основе Ant может быть получено из этого примера. Я вставлю стандартный отказ от ответственности, что «анализ» HTML с помощью регулярных выражений может быть не очень хорошей идеей.

Идея состоит в том, чтобы:

  • Либо удалите, либо конвертируйте в комментарии все <script> теги.
  • Вставьте один тег <script>, который ссылается на ваш объединенный Javascript.

Я вставил здесь один js перед закрывающим тегом </body>, но вы можете настроить его по мере необходимости. Исходные файлы здесь находятся в каталоге под названием «грязный»; скорректированные файлы в одном, называемом «чистым».

<property name="single.js" value="single.js" />
<copy todir="clean" overwrite="true">
    <fileset dir="dirty" />
    <filterchain>
        <tokenfilter>
            <replaceregex
             pattern="(&lt;)(\s*SCRIPT\s+SRC=['&quot;][^'&quot;]+['&quot;]\s*)/(&gt;)"
             replace="\1!--\2--\3"
             flags="gi"/>
            <replaceregex
             pattern="(&lt;/BODY&gt;)"
             replace="&lt;SCRIPT SRC=&quot;${single.js}&quot; /&gt;${line.separator}\1"
             flags="i"/>
        </tokenfilter>
    </filterchain>
</copy>

1 голос
/ 16 сентября 2011

Существует библиотека под названием wro4j , которую можно использовать как решение времени сборки (плагин maven) или решение (фильтр) времени выполнения и которое поможет вам хранить все описанные ресурсы в одном месте.просто:

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

Таким образом, вы можете переключить все ссылки на ресурсы в html с:

<script src="script1.js">
<script src="script2.js">
<script src="script3.js">
...
<script src="script99.js">

на

<script src="all.js">

Отказ от ответственности: Этопредвзятый ответ, так как я работаю над этим проектом.

1 голос
/ 16 сентября 2011

В зависимости от используемой вами технологии, вы можете иметь одну ссылку JS в своем html на обработчик, который объединяет все файлы JS в каталоге в один файл JS.Тогда вы можете легко управлять отдельными файлами во время разработки с помощью одного HTTP-запроса во время выполнения.Существуют плагины, которые сжимают JS, удаляют пробелы и кэшируют результаты, но опять же, это зависит от вашей технологии.

1 голос
/ 16 сентября 2011

Один из способов сделать это - загрузить html только один скрипт, но в процессе разработки этот скрипт является своего рода «оболочкой», которая заставляет загружать другие отдельные скрипты, используя методику , указанную здесь ,В работе содержимое этого сценария заменяется объединением всех сценариев (предпочтительно путем некоторой конкатенации на стороне сервера).

0 голосов
/ 16 сентября 2011

Вы можете использовать modconcat , который является плагином apache.Это помогает легко объединять файлы следующим образом.

От:

<head>
    <link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="/css/forms.css" type="text/css" media="screen" />
</head>

Кому:

<head>
    <link rel="stylesheet" href="/css/reset.css,master.css,forms.css" type="text/css" media="screen" />
</head>
0 голосов
/ 16 сентября 2011

Существует проект Google под названием minify: http://code.google.com/p/minify/, который, вероятно, будет именно тем, что вы ищете.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...