[AngularJS + Gulp] Gulp task

In this lesson, we will learn how tasks work in Gulp. We will talk about how to define a task and what each parameter in the definition does. We will see how task dependencies work and talk about how to handle asynchronous issues usingrun-sequence.

 

When you run:

gulp

in the command line, it will run the default task.

 

gulp.task(name[, deps], fn)

gulp.task('somename', function() {
  // Do stuff
});

 

Because Gulp is asynchronous, this is a sometimes common scenario. One of the ways to solve this is using the run sequence plugins:

npm install --save-dev run-secquence

 

Define a array of tasks to be run:

gulp.task('copy-build', ['copy-assets','copy-js','copy-vendor-js']);

gulp.task('copy-assets', function() {

});

gulp.task('copy-js', function() {

});

gulp.task('copy-vendor-js', function() {

});

 

Use default task to run build task, in build task, we do clean task first then do the copy-build task.

For the copy-build task, there are three sub-tasks are defined.

When you run async, you need to provide a hint, in our case is callback function. Then gulp know when the main task is finished.

var gulp = require('gulp'),
    runSequence = require('run-sequence');

//Default task
gulp.task('default', function(callback) {
    runSequence('build', callback);
});

gulp.task('build', function(callback) {
    runSequence('clean', 'copy-build', callback);
});

gulp.task('clean', function() {
    
});

gulp.task('copy-build', ['copy-assets','copy-js','copy-vendor-js']);

gulp.task('copy-assets', function() {

});

gulp.task('copy-js', function() {

});

gulp.task('copy-vendor-js', function() {

});

 

So, this is how tasks work in Gulp. You define the name, the sub dependencies and then the actual unit of work while keeping in mind, you have to provide an asynchronous hint, and that's by either returning either a callback, a stream or a promise.