Example
So, we now have
- A function defined Above to optimise Styles
- A function defined Above to optimise scripts
- A function defined Above to optimise HTML
- A function to generate multiple images per image Above
All we need to do now, is to invoke them when needed.
Let us write our tasks according to the syntax we defined earlier
/*
* $.task('name','dependency array',function)
results in building a task object as below
task:{
'name':name,
'dep':[array of dependencies],
'fn':function
}
*/
//*@return returns a stream to notify on task completion
$.task('optimizeHtml', function() {
var src = ['**/*.html', '!{node_modules}/**/*.html'];
return minifyHtml(src);
});
//*@return returns a stream to notify on task completion
$.task('optimizeScripts', function() {
var src = ['js/**/*.js'];
return optimizeScripts(src);
});
//*@return returns a stream to notify on task completion
$.task('optimizeStyles', function() {
var src = ['css/**/*.css', 'fonts/google/**/*.css'];
return optimizeStyles(src);
});
//Take in a callback to ensure notifying the gulp engine, that the task is done
//required since, you are not returning a stream in this task
$.task('generateResponsiveImages', function(callback) {
var src = ['images/**/*.{jpg,png}'];
for (var i = widths.length - 1; i >= 0; i--) {
generateResponsiveImages(src, widths[i]);
}
callback();
});
