JavaScript 构建工具的用途是什么答案

【问题标题】：What is the purpose(s) of JavaScript build toolsJavaScript 构建工具的用途是什么
【发布时间】：2015-04-25 09:10:17
【问题描述】：

最近我一直在研究 Node.js。在这段时间里，我听到了很多关于使用 Gulp 或 Grunt 作为构建工具的信息。现在我有兴趣学习如何使用 Gulp。我听说它是一个构建工具，但我不确定它涵盖了哪些内容。使用像 Gulp 这样可以帮助我进行开发的构建工具我会做什么（什么样的任务）？一些例子会很好。

【问题讨论】：

标签： gulp build-tools

【解决方案1】：

Gulp（和 Grunt）允许任务自动化。

几乎所有你发现自己在项目中重复做的事情，都可以通过 gulp 及其插件自动化，如果你找不到插件来为你完成这项工作，gulp 只是一个 Node.js 应用程序，所以您可以快速编写自己的代码来完成这项工作。

就示例而言，因为我自己是 Angular Web 开发人员。我会给你一些前端开发领域的例子，但不要认为 gulp 只限于这个领域。下面是一些例子：

自动化您的构建过程（这里有一些子任务示例）
- 获取所有项目的 HTML、JavaScript、CSS，连接它们并缩小它们
- 自动将依赖项注入到您的 HTML 文件中
监听文件更改并在文件更改时运行任务
- 每次添加 JavaScript 文件时，都需要将其添加到 HTML 文件中。这可以自动化
- 每次保存 JavaScript 文件时，您都希望在其上运行 jshint，以警告错误
- 每次保存 CoffeeScript 文件时，您都希望它自动转换为 JavaScript 文件，并将该 JavaScript 文件包含到您的 HTML 文件中
自动删除文件
数以千计的其他东西

使用 JavaScript 构建工具（与 Java 的 Ant 或 Rails 的 Rake 不同）的另一个有趣的好处是，大多数 Web 应用程序都使用 JavaScript，所以如果你的后端是 Java、Rails 或 C++，你的前端人们总是在 JavaScript 下欢欣鼓舞。这意味着，无论您使用哪种语言，您仍然使用 JavaScript，这使得 gulp 之类的工具非常有趣，因为 JavaScript 和 JavaScript 经验保证存在于任何 Web 开发团队中。

我想我会及时更新以使其更清晰。在此之前，请查看：http://gulpjs.com/plugins/ 以了解您可以通过 gulp 获得的一些易于获得的功能。

这是一个 gulp 任务的快速代码示例，它获取您项目的图像，并将它们移动到您的 dist 文件夹中：

gulp.task('images', ['clean'], function () {
  return gulp.src('/src/assets/images/**/*')
    .pipe(gulp.dest('dist/assets/images/'));
});

任务可以链接在一起并相互依赖。注意任务 'images' 是如何依赖于 'clean' 的。这意味着如果您想运行“图像”，您的“清洁”任务将自动被调用。这允许您将任务链接在一起以获得非常强大的可重用任务序列。下面是一个“干净”的示例：

gulp.task('clean', function (done) {
  del(['/dist'], done);
});

这是我通过谷歌搜索找到的一些随机页面。它包含一个非常清晰的 CoffeeScript 文件，其中包含前端项目中的 gulp 自动化任务示例：http://pem-musing.blogspot.ca/2014/02/a-gulp-of-coffee-your-gulpfile-in.html。

【讨论】：

那么，npm install 是通过 gulp 运行的理想任务吗？
我不明白为什么这会是个问题，但不要相信我的话......你为什么认为这可能是个问题？为什么你需要 npm install 在任务中？
感谢@Cosmin，用简单的英语解释了这个概念。赞赏。 :)

【解决方案2】：

Gulp JS 是一个基于 Javascript 的工具，可让您自动执行工作流程中的任务。自动化实际上可以提高您的产量。无论您是不时创建 HTML 线框的开发人员还是设计师，我们都建议您深入研究。

http://www.jshive.com/getting-started-gulp-task-runner/

【讨论】：

【解决方案3】：

构建工具是应用程序开发的资产。几年前，项目经理经常跑在开发人员后面，要求他们清理代码、整理代码、提高应用程序的性能等。

开发人员通常的做法是为生产环境复制“开发”环境代码并执行所需的操作。开发人员将使用第三方软件或应用程序来帮助清理代码，例如删除不必要的 cmets、缩小以减小文件的整体大小，从而减小应用程序的大小、连接文件以减少对服务器的访问次数、执行单元测试，仅举几例。

像 Gulp 和 Grunt 这样的构建系统所做的是，它可以在几秒钟内自动完成上述所有任务。这些构建系统具有特定的插件，可以进行连接、缩小、linting、环境特定的开发等。所有这些任务一次性运行，执行所需的操作，然后从新形成的生产代码运行应用程序。

使用构建系统的优势在于它可以更大程度地加快应用程序的页面加载时间。您的代码更干净、更小，同时遵循最佳编码实践。反过来，您可以节省大量用于执行这些任务的时间。

它们很容易使用，应该用于应用程序开发。 :-)

【讨论】：