如何缩小多个/混合文件类型


How to minify multiple/mixed file types

我做了很多web性能优化工作,经常在项目中(显然)不是每个人都在开发环境和生产环境中处于同一页面上。

我工作的大多数项目都使用HTML、CSS和JS,但我经常关注的HTML是PHP模板(主要是HTML)。

哪些PHP迷你程序(如果有的话)将在主要是HTML的文件上正确工作,哪些JS和CSS迷你程序将生成对开发人员友好但精简的代码(例如,CSS文件,每条规则都在一行,同时保留注释但删除空白)。

由于易于运行不同的任务,我目前使用Grunt和大多数"contrib"插件来完成大部分任务,但在简单的串联和完整的串联和缩小(即所有代码都在一行)之间似乎没有太大的区别。

是否有任何工具可以提供中间立场和/或处理混合文件类型(即主要包含HTML的PHP文件或包含PHP的.htm(l)文件扩展名的文件)?

这是我(截至昨天)找到的最令人满意的解决方案。。。抱歉,但我必须提到一个特定的程序(我想其他程序也可能这样做)。

我能给出的最清晰的解释是CSS:

在Sublime Text中打开项目,用激活的正则表达式匹配选项进行"替换",查找'n'n(2个回车)并替换为'n(1个回车)。

保存。

然后在IDE中打开项目,设置代码格式首选项,使声明、属性和右括号位于各自的行上,并且每个行缩进相等的数量。

然后,我将这些设置应用于整个项目,并重新格式化了代码。为了防止psuedo类匹配,我将其设置为在冒号后面有一个空格,用于分隔规则和声明。例如:

a:hover{
font-weight: bold;
}
p{
font-weight: normal;
}

然后,我为:做了一个"查找所有"(后面紧跟着一个空格——在Sublime Text中,我只突出显示了一个冒号和后面的空格,然后选择了"全选"选项(Mac上的命令+控制+g)。

然后我将光标移动到每行的开头(命令+◀︎[这是一个向左箭头])并删除,直到所有属性都在一行上。

然后,我向下移动到下一行,这些行只有}(右括号)并被删除,直到它与属性和声明位于同一行。

然后,我调整了这个过程,以处理我需要的每个文件(PHP/HTML、CSS、JS)。

最终的结果是紧凑、人性化、可读的代码,它具有所有开发人员友好的功能(声明中最后一个属性后面的分号,单独行上的声明)。