Gulp Concatenating Files

In this tutorial we will be looking into the gulp-concat plugin. Using this plugin we can concate multiple source files into single file

Gulp Concat Plugin :

We need to first include dependency of gulp-concat plugin into gulpfile.js like -

var concat = require('gulp-concat');

In order to create task we need to write like -

gulp.task('styles', function() {
   console.log('Start Executing Task : styles');
   gulp.src(['src/styles/*.css'])
	.pipe(concat('styles.css'))
	.pipe(gulp.dest('build/styles/'));
});

After writing the gulp task we need to run it using below command-

gulp styles

It will produce following output

F:\wamp\www\gulp>gulp styles
[17:31:08] Using gulpfile F:\wamp\www\gulp\gulpfile.js
[17:31:08] Starting 'styles'...
Start Executing Task : styles
[17:31:09] Finished 'styles' after 48 ms
F:\wamp\www\gulp>

It will take all files with extension .css from folder src/styles and concate it in the file styles.css

Complete Code : gulpfile.js

var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('styles', function() {
   console.log('Start Executing Task : styles');
   gulp.src(['src/styles/*.css'])
	.pipe(concat('styles.css'))
	.pipe(gulp.dest('build/styles/'));
});