客户端 Web 应用程序的开发/构建工具答案

【问题标题】：development/build tool for client side web application客户端 Web 应用程序的开发/构建工具
【发布时间】：2012-11-23 17:48:21
【问题描述】：

我正在开发一个非常大的节点 Web 应用程序，并意识到我的工作流程不是最理想的。服务器端代码被很好地组织成节点模块。然而，应用程序中的大部分繁重工作都发生在客户端代码上。

项目由jade、less和javascript/coffeescript代码组成。此外，还有许多来自库（jQuery、D3、Bootstrap 等）的 css/js 包含。我正在寻找但很难找到的是一个很好的工具链，它可以帮助我组织我的项目并在开发和生产之间切换：

开发模式：在node中即时编译jade、less和coffeescript，无需重建。将编译后的代码作为单独的文件包含在 html 中。在服务端代码中设置一些调试参数。
生产模式：构建脚本（make/ant），编译压缩并组合代码成静态html/css/js。

目前我正在手动使用一些用于开发的节点服务器代码和用于生产的 make 文件，例如比如：

cat javascript/*.js > build/client.js

但这有点烦人，我根本不是制造/蚂蚁专家。还有一个问题是我为开发和生产维护单独的 html 文件，因为它们包含不同的 css/js 文件。

是否有任何好的框架或示例项目可以帮助我改进我的工作流程？谷歌给了我hem、buildr.npm、grunt之类的东西，但我不太确定这些项目有多成熟，以及它们是否真的解决了我的问题或增加了更多复杂性。

【问题讨论】：

【解决方案1】：

你也可以看看brunch，有很多插件支持

根据它支持的网站，如果需要，您还可以添加新插件...

编程语言：JavaScript、CoffeeScript、IcedCoffeeScript、LiveScript、Roy

预编译模板：Handlebars.js、Jade、Mustache、Eco

样式：CSS、Stylus、LESS、Sass

Linter：JSHint、CoffeeLint

缩小器：uglify.js、clean-css

【讨论】：

【解决方案2】：

我会看看grunt。我们用它来处理我们项目的部署和测试。

【讨论】：

grunt 对开发环境也有帮助吗？或者它只是一个构建工具？你能详细说明一下你是如何使用它的吗？
对于开发环境，你可以使用 grunt 的 watch 函数grunt watch。然后在 grunt 配置文件中，您可以告诉它在文件更改时要运行哪些任务。在我们的开发环境中，我们经常使用 watch 任务。我发现它非常有用，因为有了手表，我可以告诉 grunt 运行我的提示并测试每个文件更改。非常适合快速错误检测。另请注意，您可以为提示设置不同的“文件集”。就像您可以为您的节点脚本和浏览器脚本提供提示一样。