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

问题描述

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

解决方案

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

几乎任何你发现自己在一个项目中反复做的事情，都可以通过gulp和它的插件实现自动化。如果你找不到插件来为你完成工作，gulp只是一个nodejs应用程序，所以你可以快速编写自己的代码来完成这项工作。

就范例而言，由于我自己是一位有角度的网页开发人员，因此我会给你前端开发土地的例子，但不要认为吞咽是有限的到这个地区。所以这里有一些例子：

• 自动化你的构建过程（这里有一些子任务的例子）
  
  
  
  
  • 取得所有项目html，js，css，连接它们并缩小它们
  
  
  • 自动将依赖关系注入到您的html文件中
  
  
  >


• 每次添加js文件时，当文件更改
  
  
  
  
  • 时，监听文件更改并运行任务，您需要将其添加到您的html文件中。这可以自动
  
  
  • 每次保存一个您要运行jshint的JavaScript文件时，每次保存一个CoffeeScript文件时警告错误
  
  
  • ，你想它被自动转换成一个JavaScript文件，并将该文件包含到你的html文件中 / li>
    
  • 成千上万的其他东西
  
  
  
  
  

  到Java的Ant或Rails的Rake），大多数Web应用程序都使用JavaScript。因此，如果您的后端使用Java或Rails或C ++ ......您的前端人员总是在JavaScript下欢欣鼓舞。这意味着，无论您使用何种语言，您仍然使用JavaScript ......这使得大量工具非常有趣，因为任何Web开发团队都可以保证JavaScript和JavaScript的体验。
  
  

  我想我会及时更新，以便更清楚。在此之前看看：

  
  
  

  http：// gulpjs。 com / plugins / 了解一些容易获得的功能，您可以通过使用gulp获得一些功能。

  
  
  

  下面是一个快速代码示例，其中包含一个项目的图像，并将它们移动到您的dist文件夹中：
  
  

    gulp.task（'images'，['clean']，function（）{
   return gulp.src（'/ src / assets / images / * * / *'）
   .pipe（gulp.dest（'dist / assets / images /'））; 
  }）; 
    

  任务可以链接在一起并依靠彼此。注意任务的图像取决于干净。这意味着如果你想运行'图像'你的'干净'任务将自动被调用。这使您可以将任务链接在一起，实现非常强大的可重用任务序列。下面是一个'干净'的样子：

    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

  
  
  

  希望这有助于
  

  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 ( and Grunt ) allows for task automation.

  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 nodejs app, so you can quickly write your own code to do the job.

  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. So here are some examples :

  • automate your build process ( some subtask examples here )
    • take all your projects html,js,css, concatenate them and minify them
    • automatically inject dependencies into your html files
  • listen to file changes and run tasks when a file changes
    • everytime you add a js file, you need to add include it to your html files. this can be automated
    • everytime you save a JavaScript file you want to run jshint on it, to warn for errors
    • everytime you save a CoffeeScript file, you want it to be automatically converted into a javascript file, and have that javascript file included to your html files
  • deleting files automatically
  • thousands of other things

  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.

  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.

  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/'));
  });
  

  Tasks can be chained together and rely on eachother. 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);
  });
  

  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

  Hope this helps

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