连接后更新脚本标签的 Javascript 构建工具答案

【问题标题】：Javascript build tools that update script tags after concatenation连接后更新脚本标签的 Javascript 构建工具
【发布时间】：2013-11-14 23:50:05
【问题描述】：

我非常热衷于在我的 Javascript/Web 应用程序开发中使用一些构建技术，例如

最后两个我还没有找到答案。

构建与源代码

我的意思是我的 HTML 和 Javascript 的“源”版本是不变的，这样我就不必每次都构建来预览更改。我所有的 JS 文件都是单独的

这说明了自己 - 遍历我的源代码树并构建一个清单并将其插入到我的标记中。

我没有运气搜索过这两个 - 任何指针？如果不是这两个人，我会带着杀手级构建系统上路。

谢谢！！！

【问题讨论】：

having a "source" version of my HTML and Javascript HTML 和 Javascript 已经是源代码；你不建造它们。如果我不熟悉网络应用程序编写术语，请原谅我，但是构建它们是什么意思？
包装我是另一个术语，而不是“构建”。以github.com/cowboy/grunt为例。
小心用数据 URI 替换图像。由于它们是 base64 编码的，因此数据 URI保证比原始 URI 大 33%。此外，通过将图像资源移动到 HTML 中，通常会破坏缓存机制。（对您的页面进行一次小的更新意味着重新传输您的所有图像；图像数据在页面之间重复，等等。）老实说，我根本不会使用数据 URI。

【解决方案1】：

听起来您对 grunt 已经很熟悉了。您可能需要考虑查看grunt node-build-script plugin。

它添加了许多新任务，特别是 grunt mkdirs 和 grunt copy，它们会将您的项目目录复制到单独的暂存文件夹中，然后将优化后的项目复制到发布文件夹中。如果我没记错的话，这就是您所说的保留源文件的“未修改”版本的意思？

运行grunt server 然后将在本地主机上提供您发布文件的内容。如果您想检查处于未优化状态的应用程序，您可以始终将您的 Web 服务器指向您的初始项目目录。

node-build-script 添加了许多其他超级方便的任务，例如图像优化、自动文件更新和替换。它非常易于使用且超级可定制。

我有一个basic single page template，它使用了node-build-script，这也可能是有趣的。

我相信这曾经是 node-build-script 的一部分，但后来被删除了，请参阅 1、2

没有什么能阻止您创建一个自定义的 grunt 任务，该任务使用类似 confess.js 的东西。

最后，如果您还没有的话，看起来 Google 即将推出的 Yeoman 可能值得关注！

【讨论】：