Gulp Combining Task

Gulp configuration file consists of task modules. The Gulp task will have following structure −

gulp.task('name-of-task', function() {
   //write your task actions
});

In order to register a task in gulp file we need to call gulp.task function which accepts two parameters. First parameter name-of-task is considered as task name and second parameter is anonymous function block which defines the task actions.

function() {
   //write your task actions
}

gulp.task will register function as task within the name. This name is used to specify the dependency on other gulp tasks.

How to install gulp plugin ?

Consider we want to concatenate style sheets. After concatenating we need to minify the style sheet and copy it to build folder. Lets install required plugins.

npm install gulp-minify-css --save-dev
npm install gulp-minify-js --save-dev
npm install gulp-concat --save-dev

We have installed two plugins. One for minifying the css and one for concatenating minified files. As soon as after installation of plugins, you need to write dependencies in gulp configuration file as below -

var minifyCSS = require('gulp-minify-css');
var minifyJS = require('gulp-minify-js');
var concat = require('gulp-concat');

In order to use plugin we will be using minifyCSS and concat variables while building the gulp task

Building Gulp Task

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

Above example of the gulp task will do following things -

It will select all files with extension .css from the folder src/styles
It will concatenate all the selected css files from above mentioned folders into style.css file
Once we concatenate all the css files style.css file is passed to minifyCSS plugin which will minify css code.
After minifying the css file, minified css file is copied to build/styles folder.

Building Gulp Task for JavaScript Minification

gulp.task('scripts', function() {
   gulp.src(['src/scripts/*.css'])
   .pipe(concat('script.css'))
   .pipe(minifyJS())
   .pipe(gulp.dest('build/scripts/'));
});

Above example of the gulp task will do following things -

It will select all files with extension .js from the folder src/scripts
It will concatenate all the selected js files from above mentioned folders into script.js file
Once we concatenate all the js files script.js file is passed to minifyJS plugin which will minify js code.
After minifying the js file, minified js file is copied to build/scripts folder.

Combining Multiple Tasks

We have defined two tasks above, out of that one task will minify and concatenate JavaScript files and one will minify and concatenate CSS files.

Now we will define a single task which will call both the tasks from single task.

gulp.task('build', ['scripts', 'styles'], function() {
});

When we run above task then it will execute first task scripts and after the execution of the first task it will execute second task styles

If we want to run above task then we will hit below command in the command prompt like -

gulp build

We will get below result -

C:\wamp\www\project>gulp
[12:01:43] Using gulpfile C:\wamp\www\project\gulpfile.js
[12:01:43] Starting 'scripts'...
[12:01:43] Finished 'scripts' after 10 ms
[12:01:43] Starting 'styles'...
[12:01:43] Finished 'styles' after 13 ms
[12:01:43] Starting 'build'...
[12:01:43] Finished 'build' after 6.13 ms

If you want above task as default task then you can define task as -

gulp.task('default', ['scripts', 'styles'], function() {
});

To run above task we need to call it like -

gulp

Complete Code : gulpfile.js

var minifyCSS = require('gulp-minify-css');
var minifyJS = require('gulp-minify-js');
var concat = require('gulp-concat');
gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});
gulp.task('scripts', function() {
   gulp.src(['src/scripts/*.css'])
   .pipe(concat('script.css'))
   .pipe(minifyJS())
   .pipe(gulp.dest('build/scripts/'));
});
gulp.task('build', ['scripts', 'styles'], function() {
});

Gulp Basics

Gulp Plugins