How to use Gulp

Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks such concatenate js files, minifying js and css files, optimizing images e.t.c.

Firstly install gulp cli:

# without sudo not working on MacOs
sudo npm install --global gulp-cli


  • go to project directory
  • install all necessary plugins
  • add gulpfile.js where the gulp tasks are listed
  • execute gulp

cancating and minify

With this example you can concat and minify usual js files (not modules) and css files.

1. Install gulp with concat plugin:

npm install --save-dev gulp gulp-concat

2. Install gulp plugins for minify javascripts and css files:

npm install --save-dev gulp-clean-css gulp-minify

Or if you use es6 syntax:

npm install --save-dev gulp-uglify-es

3. Add the gulpfile.js file with following content:

var gulp = require('gulp');
var concat = require('gulp-concat');
//- var minify = require('gulp-minify');
//+ minify with es6 support
var uglify = require('gulp-uglify-es').default;
var cleanCss = require('gulp-clean-css');

// Suppose you have js/src with your js, it can contains subdirectory.
// Suppose you have a js/vendor directory for code from vendors.
gulp.task('pack-js', function() {
    return gulp.src(['js/vendor/file-saveas-min.js', 'js/src/**/.js'])

// assume you have css directory with mycss1.css and mycss2.css files
gulp.task('pack-css', function() {
    return gulp.src(['css/mycss1.css', 'css/mycss2.css'])

// old
// gulp.task('default', ['pack-js', 'pack-css']);
// gulp 4.0+
gulp.task('default', gulp.series('pack-js', 'pack-css'));

4.Execute gulp:


useful plugins and modules for gulp

# module for logging
npm install --save-dev fancy-log

# gulp 3.0 plugin for replacing string in .pipe
npm install --save-dev gulp-replace