Gulp

Question 1

What are the 4 top level functions?

Answer 1

gulp. task
gulp. src
gulp. dest
gulp. watch

Question 2

gulp.task

Answer 2

One of four top level functions.

Defines your tasks. Its arguments are name, deps and fn.

gulp.task('mytask', function() {
  //do stuff
});

gulp.task('dependenttask', ['mytask'], function() {
  //do stuff after 'mytask' is done.
});

Question 3

What is Gulp?

Answer 3

Gulp is a streaming build system. It’s streaming nature is what allows it to pipe and pass around the data being manipulated or used by it’s plugins. The plugins are intended to only do one job each, so it’s not uncommon to pass a singular file through multiple plugins.

Question 4

deos

Answer 4

an array of task names

NOTE: deps is optional

Question 5

fn

Answer 5

the function that performs your task.

Question 6

gulp.src

Answer 6

One of four top level functions

gulp.src points to the files we want to use. It’s parameters are globs and an optional options object. It uses .pipe for chaining it’s output into other plugins.

parameters are globs and an optional options objects. Uses .pipe for chaining its output into other plugins

Question 7

globs

Answer 7

parameters of gulp.src

Question 8

gulp.dest

Answer 8

One of four top level functions

gulp.dest points to the output folder we want to write files to.

Question 9

Write code example of how to simply copy files with gulp

Answer 9

gulp.task('copyHtml', function() {
  // copy any html files in source/ to public/
  gulp.src('source/*.html').pipe(gulp.dest('public'));
});

Question 10

gulp.watch

Answer 10

One of four top level functions.

gulp. watch like gulp.task has two main forms. Both of which return an EventEmitter that emits change events. The first of which takes a glob, an optional options object, and an array of tasks as it’s parameters.
gulp. watch(‘source/javascript/**/*.js’, [‘jshint’]);

Question 11

What does the following code do:

gulp.watch(‘source/javascript/**/*.js’, [‘jshint’]);

Answer 11

when any files in the source/javascript subfolders that have an extension of .js change, then the task jshint will be run against those files.

The second form takes the glob, an optional options object, and an optional callback that will run when a change is picked up.

Question 12

Write the syntax for creating a Gulp task.

Answer 12

gulp.task(‘NAME_OF_TASK’, function() {
gulp.src([‘PATH_TO_SOURCE_FILE’])
.pipe(INSERT_TASK)
.pipe(gulp.dest(‘PATH_TO_DESTINATION’);
});

Question 13

What is –save-dev used for?

Answer 13

–save-dev is used to update dev-dependencies in package.json

e.g. npm install gulp –save-dev