发布时如何开发 Javascript 和 CSS 并使用缩小版本？答案

【问题标题】：How to develop Javascript and CSS and use minified versions when releasing?发布时如何开发 Javascript 和 CSS 并使用缩小版本？
【发布时间】：2013-07-12 23:39:41
【问题描述】：

希望这不是一个重复的问题。

我想知道最佳实践，因为我对整个前端开发非常陌生，人们如何开发/测试 javascript/css 并同时将他们的代码和所有依赖项都尽可能地缩小。你使用什么样的构建过程？这是一个例子：假设你有 style.css 和 app.js 依赖于 bootstrap.css 和 jquery.js。

如何在开发时将这些文件的完整版本包含在 html 中，然后在发布时使用缩小版本？您是使用 YUI 压缩器（或其他类似工具）缩小第三方 css/js（例如 jquery 和引导自己）还是使用下载的缩小版本？如何在完整版代码和缩小版之间进行交换？谢谢。

【问题讨论】：

使用服务器端代码。
@SLaks，你能详细说明一下吗？
如果你使用VS请参考stackoverflow.com/a/2681231/929902

标签： javascript css build-automation yui-compressor

【解决方案1】：

我将只维护您的代码库未压缩并使用 ant (http://ant.apache.org/) 或类似的东西来创建一个运行您的测试的构建过程，可能在您的代码上运行 jslint，然后将其缩小并将其复制到一个结构中准备发布。

构建可以根据需要命名文件，因此您不必担心缩小的文件名不同。

【讨论】：

我也在考虑同样的事情，但是你如何保持 html 同步更新？
@John 看看Continuous integration（Jenkins、Hudson、CruiseControl 等），这样你就可以推送到QA server。您还可以将内容集成到您的构建脚本中，这将在部署中缩小您的 CSS 和 JS。 version control 也是必须的，如果你还没有使用它的话。
我的困难是将缩小版本命名为 script-min.js style-min.js 并且没有一种简单的方法来替换 html 中的脚本/样式包含元素以根据开发指向正确的文件或发布版本。因此，我没有为缩小版本使用不同的文件名，而是将文件结构复制到 dist 目录并缩小那里的资产并保持相同的名称，因此无需更新 html 文件。

【解决方案2】：

我通过使用 css 和 javascript 的预编译器来做到这一点。有很多方法可以有效地做到这一点，我使用 SASS 编写代码并使用两个应用程序：prepos (win) 和 scout (win/osx) 来编译缩小或人类可读的代码。

我建议您观看 CSS Tricks 提供的有关此主题的视频： http://css-tricks.com/video-screencasts/124-a-modern-web-designers-workflow/

【讨论】：