The Gulp API

Gulp has four methods that you will be using a lot. Those are src(), dest(), task(), and watch(). Additionally, you will be using Node's pipe() method to pass the output from one function to the other. The following example takes the css folder and simply copies it to a new css_copy folder:

var gulp = require('gulp');

gulp.task('copycss', function () {
gulp.src('css*.css')
.pipe(gulp.dest('css_copy'));
});

gulp.task('default', ['copycss']);

As you can see, we defined two tasks, 'copycss' and 'default'. The 'default' task is started by Gulp by, well, default. In this case, the default task simply starts the tasks defined in the array, so copycss. In the copycss task, we take all the CSS files from the css folder. As you can see, wildcards are allowed, which returns a Node.js Stream object, and pipes the contents of that Stream object to the gulp.dest function, which writes the contents to the css_copy folder. If you run this in Gulp, you will find your CSS files copied. You can also run the copycss task directly by passing the task name to the Gulp program on the command line:

You can watch files and automatically run a series of tasks when a watched file changes. For example, let's say we want to copy all our CSS files if one changes:

gulp.watch('css*.css', ['copycss']);

We use gulp.watch, specify the files to watch, and then specify an array of tasks that need to be executed when a watched file changes. When you run the gulp command now, it will not end after it has executed the default task, but it will wait for changes. Try changing a CSS file and confirm that Gulp immediately copies it on save.

And there you have it, the entire Gulp API. Well alright, we may have missed some functions or overloads, but this is what it all boils down to.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.225.149.238