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

Build tools are an asset to application development. Few years back, it was common for project managers to run behind the developers asking them to clean up the code, lint the code, increase the performance of the application etc.

The usual modus operandi of developers was to make a copy of the 'Development' environment code for the Production environment and do the required operations. Developers would use third party software or apps that helps in cleaning up the code like removing unnecessary comments, minifying to decrease the overall size of the file and thereby the application, concatenating the files so that you decrease the number of hits to the server, perform unit tests, to name a few.

What build systems like Gulp and Grunt have done is that it automates all the above mentioned tasks in a span of few seconds. These build systems have specific plugins that does concatentation, minification, linting, environment specific development etc. All these tasks run in one go performing the required operations, in turn running the application from the newly formed production code.

The advantage of using build system is that it accelerates your application's page load time to a greater extent. Your code is cleaner, smaller in size and at the same time adheres to the best coding practices. And in turn , you save a lot of time which was spent doing each of these tasks.

They are pretty easy to work with and should be used in application development. :-)

Answer 2

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

Answer 3

Gulp JS is a Javascript based tool which allows you to automates the tasks of your workflow. Automation can literally increase your production. Whether you’re a developer or a designer who creates HTML wireframes now and then, we recommends to dig into that.

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