JavaScript 构建工具的用途是什么 [英] What is the purpose(s) of JavaScript build tools

问题描述

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

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.

推荐答案

Gulp(和 Grunt)允许任务自动化.

Gulp ( and Grunt ) allows for task automation.

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

Pretty much anything you find yourself doing repeatedly in a project, can be automated with gulp and it's plugins, and if you can't find a plugin to do the job for you, gulp is just a Node.js app, so you can quickly write your own code to do the job.

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

As far as examples, since I myself am an Angular web developer. I will give you examples from the Front End Development land, but don't think gulp is only limited to this area. Here are some examples :

• 自动化您的构建过程(此处提供一些子任务示例)
  • 将所有项目的 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 开发团队中.

  Another interesting benefit you get with JavaScript build tools specifically ( as opposed to Java's Ant or Rails's Rake ) is that most of all web applications out there use JavaScript, so if your back end is in Java or Rails or C++ your front end people always rejoice under JavaScript. Which means that, no matter what language you use, you still use JavaScript which makes tools like gulp very interesting, because JavaScript and JavaScript experience is guaranteed to exist in any web development team.

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

  I guess I'll update this in time to make it clearer. Until then have a look at: http://gulpjs.com/plugins/ to get an idea of some of the easy to obtain functionality you can get with gulp.

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

  Here's a quick code example, of a gulp task, that takes your project's images, and moves them into your dist folder:

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

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

  Tasks can be chained together and rely on each other. Notice how the task 'images' depends on 'clean' . That means that if you want to run 'images' your 'clean' task will automatically get called before. This allows you to chain tasks together for very powerful reusable task sequences. Here's an example of how 'clean' could look like:

  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.

  Here's some random page i found with a google search. It contains a very clear CoffeeScript file with examples of gulp automation tasks in a front-end project: http://pem-musing.blogspot.ca/2014/02/a-gulp-of-coffee-your-gulpfile-in.html.

  这篇关于JavaScript 构建工具的用途是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！