16

Lately I have been studying Node.js. In this time,I have heard a lot about using Gulp or Grunt in as a build tool. Now I am interested in learning how to use Gulp. I have heard it was a build tool, but I am not sure what all that covers. What would I do(what kind of tasks) with a build tool like Gulp that would assist me in development? Some examples would be nice.

4

3 回答 3

13

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 _

于 2015-02-24T15:19:05.253 回答
1

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

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

于 2016-08-30T15:43:43.007 回答
0

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

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

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

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

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

于 2017-09-08T05:06:51.777 回答