JavaScript 构建工具的用途是什么

Question

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

Answer 1

Gulp（和 G运行t）允许任务自动化。

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

就示例而言，因为我本人是一名 Angular 网络开发人员。我会给你前端开发领域的例子，但不要认为 gulp 仅限于这个领域。这里有一些例子：

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

使用 Java 脚本构建工具（与 Java 的 Ant 或 Rails 的 Rake 相对）的另一个有趣的好处是大多数 Web 应用程序那里使用 JavaScript，因此如果您的后端使用 Java 或 Rails 或 C++，您的前端人员总是喜欢使用 JavaScript。这意味着，无论您使用什么语言，您仍然使用 JavaScript 这使得像 gulp 这样的工具非常有趣，因为 JavaScript 和Java脚本经验保证存在于任何网络开发团队中。

我想我会及时更新以使其更清楚。在那之前，请查看：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' 的。这意味着如果你想运行 'images' 你的 'clean' 任务将在之前自动调用。这允许您将任务链接在一起以获得非常强大的可重用任务序列。这是 'clean' 的示例：

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

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

Answer 2

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

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

Answer 3

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

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

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

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

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

JavaScript 构建工具的用途是什么

What is the purpose(s) of JavaScript build tools

build-tools

gulp