What is the purpose(s) of JavaScript build tools

Question

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.

Answer 1

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 Node.js 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. Here are some examples :

• Automate your build process (some subtask examples here)
  • Take all your projects HTML, JavaScript, CSS, concatenate them and minify them
  • Automatically inject dependencies into your HTML files
• Listen to file changes and run tasks when a file changes
  • Every time you add a JavaScript file, you need to add include it to your HTML files. this can be automated
  • Every time you save a JavaScript file you want to run jshint on it, to warn for errors
  • Every time 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 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);
});

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.