在保持元素/样式/脚本关系的同时缩小整个目录？

Question

目前是否存在可以缩小整个项目目录的解决方案？更重要的是,是否存在任何可以缩短类名,ID并在所有文档中保持一致的解决方案？

可以改变这种情况的东西:

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");});

Answer 1

你正在寻找的不是缩小,而是压缩.根据定义缩小只会删除空格,因为缩短标识符会改变界面,可能会破坏依赖于它的外部脚本.出于这个原因,尽管在封闭系统(即封装的Web应用程序)中,缩小本质上比压缩更"安全",但压缩可能是一个好主意.

对于Javascript,大多数人使用YUI Compressor或Dean Edwards的Packer.

对于CSS,有很多工具可以"优化"样式,但我不知道是否有任何缩短类名的工具.原因可能是几个:

要压缩CSS文件,脚本需要知道包含它的所有HTML文件,以便更改其中的类和id引用.根据您网站的大小和结构,他可能是非平凡的.
在压缩之后,语义HTML变得不那么可读,<span class="image_caption">变成<span class="a12">或者更糟<p id="a12">.

这肯定是可以做到像你描述(我实际工作对个人的CMS /框架会),但它是可维护的,它很可能必须紧密结构CMS的一个组成部分,每当发布新的更改时,压缩所有文件"幕后",同时保留所有原始文件,以便整个网站可以维护.