gulp - JavaScript 构建工具的用途是什么

Question

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

Answer 1

Gulp(和 Grunt)允许任务自动化。
几乎任何你发现自己在项目中重复做的事情，都可以用 gulp 和它的插件自动化，如果你找不到插件来为你完成这项工作，gulp 只是一个 Node.js 应用程序，所以你可以快速编写自己的代码来完成这项工作。
就示例而言，因为我自己是 Angular Web 开发人员。我会给你一些前端开发领域的例子，但不要认为 gulp 只限于这个领域。这里有些例子 :

自动化您的构建过程(这里有一些子任务示例)

获取您所有的项目 HTML、JavaScript、CSS，将它们连接起来并缩小它们

自动将依赖项注入(inject)您的 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 .