What is a build system?

A build system is a collection of tasks (a.k.a. 'task runners') that automate repetitive work.

Why a task runner?

1. Eliminates repetition of consistent tasks
2. Eliminates complexity
3. Improves quality
4. Delivery of app faster
5. Consistent and repeatable processes

Common Tasks

1. Concatenation
2. Minification
3. Compiling pre-processed css
4. Firing up a server for live reload
5. Deployment builds
6. Testing
7. Code analysis

Common Build Systems

1. Configuration over code - you have to write config files in json
2. File based - Files are read and written continually
3. 3900+ plugins

1. Code over configuration - you write the tasks out in code
2. Stream based - files are read in, processed then written out
3. 1100+ plugins
4. Uses node more readily

Advantages of gulp

1. Easier learning curve
2. More readable
3. Easier to write
4. Easier to debug
5. Faster as it uses streams

Gulp APIs

1. Task - gulp.task
2. Watch - gulp.watch
3. Source - gulp.src
4. Destination - gulp.dest

gulp.task

Function:

Defines a task, its dependencies and the code it is to execute.

Dependencies must run before the task.

Tasks all run asynchronously

Syntax:

Example:

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

gulp.task('js', function() {
  return gulp.src(['js/*.js'])
    .pipe(concat('all.js'))
    .pipe(minify())
    .pipe(gulp.dest('dist/'));
});

gulp.src

Function:

Takes a file system glob and emits files that match it

Glob - file pattern match for the source files you want to enter into the stream

Syntax:

Example:

gulp.src(glob, [options])

gulp.task('js', function() {
  return gulp.src(['js/*.js'], {base: 'js/'})
    .pipe(concat('all.js'))
    .pipe(minify())
    .pipe(gulp.dest('dist/'));
});

gulp.dest

Function:

1. Piped files are written into the system
2. optionally specified options to apply to the output folder

Syntax:

Example:

gulp.dest(folder, [options])

gulp.task('js', function() {
  return gulp.src(['js/*.js'], {base: 'js/'})
    .pipe(concat('all.js'))
    .pipe(minify())
    .pipe(gulp.dest('dist/'));
});

gulp.watch

Function:

This function watches the files that match the glob pattern for changes and executes the task or callback specified as the last argument.

Syntax:

Example:

gulp.watch(glob, [options], [tasks] or callbacks)

gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['lint']);
});