在压缩之前连接 CSS 和 JS？工具？最佳实践？答案

【问题标题】：Concatenating CSS and JS prior to compressing? Tools? Best Practices?在压缩之前连接 CSS 和 JS？工具？最佳实践？
【发布时间】：2009-09-11 21:24:40
【问题描述】：

我正在开发一个单页网站，其中包含大约十几个 .js 文件，也许还有六个 .css 文件。

大部分 .js 文件都是 jQuery 插件。除了基本的 css 文件外，CSS 文件还用于相应的 jQuery 插件。

YUI Compressor 似乎是压缩 CSS 和 JS 文件的最爱。但是，它只压缩单个文件。

我还想合并我的文件，并且（理想情况下）最终得到一个 .js 和一个 .css 文件（均已压缩）。

是否有任何首选工具可让您自动将 .js 和 .css 文件合并到一个文件中，以便随后可以通过 YUI 压缩器运行？

【问题讨论】：

我会在缩小 js 和 css 的基础上添加 gzip 压缩。
我也在寻找解决方案，最好是在 php 中，它可以让我运行脚本并在我的本地开发服务器上执行此操作，我可以在上传到实时服务器

标签： javascript css yui-compressor

【解决方案1】：

如果你知道一点，php，我发现这是最好的方法：http://www.thedanglybits.com/2007/06/21/minify-your-external-javascript-and-css-with-php/

【讨论】：

不错的选择。我会探索的！不过，我真的在寻找一个桌面解决方案，因为我在使用各种不同服务器的地方工作。最好在运送到服务器之前在桌面上处理它。
如果您运行本地 Apache + PHP 服务器，它会工作。我也许可以把它编译成一个exe。你用的是 Windows，对吧？
好的。下载并解压它：ramblingwood.com/sandbox/js-minifier/js-minifier.zip 只需将 .js 文件拖放到它上面（你可以做多个），它会在与原始文件相同的目录中创建一个名为 total.js 的文件，并将它们全部压缩在该文件中.如果存在，它将附加到已经存在的 total.js 文件。
漫无边际……太棒了！唉，ZIP 似乎已损坏。但这是个好主意。你打算公开分享吗（我的意思是，除了这里吗？）我认为肯定需要这样一个简单的应用程序。
我在 Ultra 压缩中使用 7z 压缩了 zip。我忘记了 Windows 默认提取器不喜欢那样。我修复了它并重新上传了它。我确实有改进压缩和支持 CSS 以及订购其他一些功能的计划。

【解决方案2】：

您可能想查看 sprockets (http://www.getsprockets.com/)。

【讨论】：

看起来不错！唉，它是 Ruby，所以可能不适合我们的工作流程，但很好的信息。

【解决方案3】：

我前几天才问过这个问题。在厌倦了网上搜索之后，我想出了这个 hackish（windows 批处理文件）解决方案。

@echo off
set TUNA_ROOT=C:\path\to\webroot
set YUI_COMPRESSOR_PATH=C:\path\to\yuicompressor-2.4.2\build
set TEMP_JS_FILE=%TUNA_ROOT%\scripts\all_scripts_temp.js
set OUTPUT_JS_FILE=%TUNA_ROOT%\scripts\tuna_min.js
if exist "%TEMP_JS_FILE%" del "%TEMP_JS_FILE%"
if exist "%OUTPUT_JS_FILE%" del "%OUTPUT_JS_FILE%"
type "%TUNA_ROOT%\Scripts\MicrosoftAjax.js" >> "%TEMP_JS_FILE%"
echo. >> "%TEMP_JS_FILE%"
echo. >> "%TEMP_JS_FILE%"
type "%TUNA_ROOT%\Scripts\MicrosoftMvcAjax.js" >> "%TEMP_JS_FILE%"
echo. >> "%TEMP_JS_FILE%"
echo. >> "%TEMP_JS_FILE%"
rem ...and so on...
java -jar "%YUI_COMPRESSOR_PATH%\yuicompressor-2.4.2.jar" -v --charset utf-8 -o "%OUTPUT_JS_FILE%" "%TEMP_JS_FILE%"
if exist "%TEMP_JS_FILE%" del "%TEMP_JS_FILE%"

但如果有更自动化的做事方式，我会非常喜欢。

【讨论】：

感谢分享！我会玩的。

【解决方案4】：

我最终偶然发现了这个选项：

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

这是一个批处理文件，结合了本地版本的串联、YUI Compressor 和 Dean Edward's Packer。

但最后，我无法让 Packer 在本地工作。它一直在破坏我的 .js。

所以，我跳过了那部分，然后通过在线 Packer 运行我的 YUI 压缩代码，只看到压缩进一步增加了 1%，所以省略了 Packer 阶段。

最后，我的解决方案使用了上面链接的指令和稍微修改的批处理文件：

类型 ..\js-in* > jb.js java -jar ..\yui\build\yuicompressor-2.4.2.jar jb.js -o jb-yui.js

也感谢所有其他（有效）解决方案。很多很好的信息！

【讨论】：

【解决方案5】：

我几乎只使用这个网站来压缩我的 JS 和 CSS 文件：
http://www.lotterypost.com/js-compress.aspx
http://www.lotterypost.com/css-compress.aspx

【讨论】：