Свернуть весь каталог, сохраняя связи элементов / стилей / сценариев? - PullRequest
Новая
       14

Свернуть весь каталог, сохраняя связи элементов / стилей / сценариев?

14 голосов
/ 07 февраля 2009

Существуют ли в настоящее время какие-либо решения, которые могут минимизировать весь каталог проекта? Что еще более важно, существуют ли какие-либо решения, которые могут сократить имена классов, идентификаторы и поддерживать их согласованность во всех документах?

Что-то, что может превратить это:

Index.html --- 

<div class="fooBar">
  <!-- Code -->
</div>

Styles.css --- 

.fooBar { 
  // Comments and Messages
  background-color: #000000; 
}

Index.js --- 

$(".fooBar").click( function () { 
  /* More Comments */
  alert( "fooBar" ); 
});

В это:

Index.html --- 

<div class="a"></div>

Styles.css --- 

.a{background-color:#000;}

Index.js --- 

$(".a").click(function(){alert("fooBar");});

Ответы [ 3 ]

5 голосов
/ 11 февраля 2009

То, что вы ищете, это не минификация, а сжатие. Сокращение по определению только удаляет пробелы, поскольку сокращение идентификаторов изменяет интерфейс, потенциально нарушая внешние сценарии, которые зависят от него. По этой причине минимизация по своей природе «безопаснее», чем сжатие, хотя в закрытой системе (т.е. в инкапсулированном веб-приложении) сжатие может быть хорошей идеей.

Для Javascript большинство людей используют YUI Compressor или Packer Дина Эдвардса .

Для CSS существует множество инструментов для «оптимизации» стилей, но я не знаю ни одного, который бы также сокращал имена классов. Причин для этого может быть несколько:

  1. Чтобы сжать CSS-файл, сценарию потребуется знать все HTML-файлы, которые его содержат, чтобы изменить ссылки на класс и идентификатор в них. В зависимости от размера и структуры вашего веб-сайта, он может быть нетривиальным.
  2. После сжатия семантический HTML становится менее читабельным, так как <span class="image_caption"> превращается в <span class="a12"> или, что еще хуже, <p id="a12">.

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

4 голосов
/ 12 февраля 2009

Я использую http://www.w3compiler.com/, что делает сжатие и запутывание

0 голосов
/ 14 февраля 2009

Я использую YUICompressor для минимизации моих css и js файлов, а программу под названием replace для пользовательской замены строк в html (удаление комментариев, замена локальной библиотеки jquery lib на google api и др.)

Используйте командный файл для вызова программы для всех файлов с определенным расширением в каталоге вашего проекта, например: 

java -jar yuicompressor-2.4.2.jar -o temp\css\one-compressed.css temp\css\one.css
replace -quotes \q -srcdir temp\ -fname "*.php" -find "<script type=\qtext/javascript\q src=\qjs/jquery.js\q></script>" -replace "<script src=\qhttp://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js\q type=\qtext/javascript\q></script>"

и т. Д.

До сих пор я не смог найти ни одного хорошего инструмента для запутывания. Но только эти два делают задачу минимизации и сжатия автоматизированной и намного проще.

...