minify css and js and compress images

gulpfile.js

let gulp   = require('gulp');
let concat = require('gulp-concat');// file name concatination
let autoprefixer = require('gulp-autoprefixer');
let cleanCSS = require('gulp-clean-css'); //to clean css
let sourcemaps = require('gulp-sourcemaps');// for sourcemap
let minifyCSS = require('gulp-minify-css'); //minify css
let rename = require('gulp-rename'); //file rename
let sass = require('gulp-sass'); //sass to css
let del = require('del'); // to clean folders

let browserSync = require('browser-sync');
let reload = browserSync.reload;
let imageMin = require('gulp-imagemin');
let notify = require('gulp-notify');
let plumber = require('gulp-plumber');

//let uglify = require('gulp-uglify');
let uglify = require('gulp-uglify-es').default

let destination ="./build/";
let css_destination="./build/css/";
let js_destination="./build/js/";
let image_destination="./build/images/";

// Set the browser that you want to support
const AUTOPREFIXER_BROWSERS = [
  'ie >= 10',
  'ie_mob >= 10',
  'ff >= 30',
  'chrome >= 34',
  'safari >= 7',
  'opera >= 23',
  'ios >= 7',
  'android >= 4.4',
  'bb >= 10'
];

gulp.task('bs', function() {
	browserSync.init({
    //proxy: 'http://localhost'
	});
});

gulp.task('minify-js', function(){
   //gulp.src('./public/assets/js/**/*')
   gulp.src(['./public/assets/js/waypoints.js',
   	'./public/assets/js/jquery.counterup.min.js',
   	'./public/assets/js/jquery.scrolly.js',
   	'./public/assets/js/magnific-popup.min.js',
   	'./public/assets/js/isotope.min.js',
   	'./public/assets/js/images-loded.min.js',
   	'./public/assets/js/owl.carousel.min.js'])
   .pipe(concat('script.js'))
   .pipe(uglify())
   .pipe(gulp.dest(js_destination));
});

gulp.task('minify-css', () => {
  return gulp.src('./public/assets/css/**/*.css')
  	// Auto-prefix css styles for cross browser compatibility
    .pipe(autoprefixer({browsers: AUTOPREFIXER_BROWSERS}))

    //sourcemap file initialization
  	.pipe(sourcemaps.init({loadMaps: true}))

  	//clean all css file one by one
    .pipe(cleanCSS({debug: true}, (details) => {
  		console.log(`>>============    ${details.name} : ${details.stats.originalSize}      =======>>`);
		console.log(`>>============    ${details.name} : ${details.stats.minifiedSize}      =======>>`);
    }))

    // write sourcemap file
 	.pipe(sourcemaps.write())

 	//minify css files
 	.pipe(minifyCSS({keepBreaks: true}))

 	//add min suffix in each file name
    .pipe(rename({suffix: '.min'}))

    //place all files in destination folder
	.pipe(gulp.dest(css_destination));
});


gulp.task('styles', function() {
	return gulp.src('./sass/**/*.scss')
		.pipe(plumber({
		  errorHandler: notify.onError("Error: <%= error.message %>")
		}))
		.pipe(sourcemaps.init())
		.pipe(sass())
		.pipe(minifyCSS())
		.pipe(concat('style.css'))
		.pipe(autoprefixer('last 5 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest('./'))
		.pipe(reload({ stream: true }));
});

gulp.task('scripts', function () {
	return gulp.src('./js/scripts.js')
		.pipe(plumber({
		  errorHandler: notify.onError("Error: <%= error.message %>")
		}))
		.pipe(concat('main.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('./js'))
		.pipe(reload({stream:true}));
});

gulp.task('minify-image', function () {
	//images source location
	return gulp.src('./uploads/**/*')
		//image-minify start here
		.pipe(imageMin([
			//gif minify
			imageMin.gifsicle({interlaced: true}),
			//jpg minify
			imageMin.jpegtran({progressive: true}),
			//png minify
			imageMin.optipng({optimizationLevel: 5}),
			//svg minify
			imageMin.svgo({
				plugins: [
					{removeViewBox: true},
					{cleanupIDs: false}
				]
			})
			// print output in console
			],{verbose: true}))
			 //place all files in destination folder
			.pipe(gulp.dest('./build/images/'));
});

gulp.task('pack-css', function () {	
//	gulp.start('clean');
	gulp.start('minify-css');
	return gulp.src(css_destination+'/**/*.css')
		.pipe(minifyCSS())
		.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
		.pipe(concat('app.css'))
		.pipe(gulp.dest(css_destination+'/packed/'));
});

gulp.task('pack-js', function () {	
	gulp.start('minify-js');
});

//gulp.src('src/css/**/*.css')
//    .pipe(minifyCSS())
//    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
//    .pipe(concat('style.min.css'))
//    .pipe(gulp.dest('dist/css'))

// Clean output directory
gulp.task('clean', () => del([destination]));



// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
	gulp.watch('sass/**/*.scss', ['styles']);
	gulp.watch('./js/**/*.js', ['scripts']);
	gulp.watch('./**/*.php', reload);
});

gulp.task('default', ['styles', 'scripts', 'images', 'bs', 'watch']);

// Gulp task to minify all files
gulp.task('default', ['clean'], function () {
  runSequence(
    'minify-css',
    'minify-js',
    'minify-image'
  );
});

package.json

{
  "name": "site-optimizer",
  "version": "1.0.0",
  "description": "minify styles, scripts and images",
  "main": "gulpfile.js",
  "scripts": {
    "test": "default"
  },
  "author": "chirag jagani",
  "license": "ISC",
  "dependencies": {
    "browser-sync": "^2.24.7",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^4.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.0",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.1",
    "gulp-uglify-es": "^1.0.4"
  },
  "devDependencies": {
    "gulp-clean-css": "^3.10.0"
  }
}