What is the correct way to insert plugins into gulpfule.js?

Question

JavaScript

Friends, please tell me how to correctly insert the following plugins into the already prepared gulpfile.js, or rather, add tasks with these plugins to the already generated ones?

= require('gulp-csscomb'); // Расческа для CSS
= require('gulp-uncss'); // Удаление лишнего CSS
= require('gulp-plumber'); // Не позволяет плагину умереть молча
= require('ngrok'); // Пробрасываем локальному серверу путь наружу для для заказчика
= require('gulp.spritesmith'); // Спрайты

gulpfile.js file:

var gulp       = require('gulp'), // Подключаем Gulp
  sass         = require('gulp-sass'), //Подключаем Sass пакет,
  browserSync  = require('browser-sync'), // Подключаем Browser Sync
  concat       = require('gulp-concat'), // Подключаем gulp-concat (для конкатенации файлов)
  uglify       = require('gulp-uglifyjs'), // Подключаем gulp-uglifyjs (для сжатия JS)
  cssnano      = require('gulp-cssnano'), // Подключаем пакет для минификации CSS
  rename       = require('gulp-rename'), // Подключаем библиотеку для переименования файлов
  del          = require('del'), // Подключаем библиотеку для удаления файлов и папок
  imagemin     = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
  pngquant     = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png
  cache        = require('gulp-cache'), // Подключаем библиотеку кеширования
  autoprefixer = require('gulp-autoprefixer');// Подключаем библиотеку для автоматического добавления префиксов

gulp.task('sass', function(){ // Создаем таск Sass
  return gulp.src('app/sass/**/*.sass') // Берем источник
    .pipe(sass()) // Преобразуем Sass в CSS посредством gulp-sass
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) // Создаем префиксы
    .pipe(gulp.dest('app/css')) // Выгружаем результата в папку app/css
    .pipe(browserSync.reload({stream: true})) // Обновляем CSS на странице при изменении
});

gulp.task('browser-sync', function() { // Создаем таск browser-sync
  browserSync({ // Выполняем browserSync
    server: { // Определяем параметры сервера
      baseDir: 'app' // Директория для сервера - app
    },
    notify: false // Отключаем уведомления
  });
});

gulp.task('scripts', function() {
  return gulp.src([ // Берем все необходимые библиотеки
    'app/libs/jquery/dist/jquery.min.js', // Берем jQuery
    'app/libs/magnific-popup/dist/jquery.magnific-popup.min.js' // Берем Magnific Popup
    ])
    .pipe(concat('libs.min.js')) // Собираем их в кучу в новом файле libs.min.js
    .pipe(uglify()) // Сжимаем JS файл
    .pipe(gulp.dest('app/js')); // Выгружаем в папку app/js
});

gulp.task('css-libs', ['sass'], function() {
  return gulp.src('app/css/libs.css') // Выбираем файл для минификации
    .pipe(cssnano()) // Сжимаем
    .pipe(rename({suffix: '.min'})) // Добавляем суффикс .min
    .pipe(gulp.dest('app/css')); // Выгружаем в папку app/css
});

gulp.task('watch', ['browser-sync', 'css-libs', 'scripts'], function() {
  gulp.watch('app/sass/**/*.sass', ['sass']); // Наблюдение за sass файлами в папке sass
  gulp.watch('app/*.html', browserSync.reload); // Наблюдение за HTML файлами в корне проекта
  gulp.watch('app/js/**/*.js', browserSync.reload);   // Наблюдение за JS файлами в папке js
});

gulp.task('clean', function() {
  return del.sync('dist'); // Удаляем папку dist перед сборкой
});

gulp.task('img', function() {
  return gulp.src('app/img/**/*') // Берем все изображения из app
    .pipe(cache(imagemin({  // Сжимаем их с наилучшими настройками с учетом кеширования
      interlaced: true,
      progressive: true,
      svgoPlugins: [{removeViewBox: false}],
      use: [pngquant()]
    })))
    .pipe(gulp.dest('dist/img')); // Выгружаем на продакшен
});

gulp.task('build', ['clean', 'img', 'sass', 'scripts'], function() {

  var buildCss = gulp.src([ // Переносим библиотеки в продакшен
    'app/css/main.css',
    'app/css/libs.min.css'
    ])
  .pipe(gulp.dest('dist/css'))

  var buildFonts = gulp.src('app/fonts/**/*') // Переносим шрифты в продакшен
  .pipe(gulp.dest('dist/fonts'))

  var buildJs = gulp.src('app/js/**/*') // Переносим скрипты в продакшен
  .pipe(gulp.dest('dist/js'))

  var buildHtml = gulp.src('app/*.html') // Переносим HTML в продакшен
  .pipe(gulp.dest('dist'));

});

gulp.task('clear', function (callback) {
  return cache.clearAll();
})

gulp.task('default', ['watch']);

And also, please tell me how to set default tasks for the build, delete the cache and start the gallp with watch.
PS don't swear too much I just started to learn Gulp, but I already need to apply it on the project, so I decided to ask the more experienced

Answer 1

var gulp       = require('gulp'), // Подключаем Gulp
  sass                       = require('gulp-sass'), //Подключаем Sass пакет,
  browserSync         = require('browser-sync'), // Подключаем Browser Sync
  concat                  = require('gulp-concat'), // Подключаем gulp-concat (для конкатенации файлов)
  uglify                   = require('gulp-uglifyjs'), // Подключаем gulp-uglifyjs (для сжатия JS)
  cssnano               = require('gulp-cssnano'), // Подключаем пакет для минификации CSS
  rename                = require('gulp-rename'), // Подключаем библиотеку для переименования файлов
  del                       = require('del'), // Подключаем библиотеку для удаления файлов и папок
  imagemin            = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
  pngquant            = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png
  cache                  = require('gulp-cache'), // Подключаем библиотеку кеширования
  autoprefixer        = require('gulp-autoprefixer'), 
  csscomb              = require('gulp-csscomb'), // Расческа для CSS
  uncss                  = require('gulp-uncss'), // Удаление лишнего CSS
  plumber             = require('gulp-plumber'), // Не позволяет плагину умереть молча
  grok                   = require('grok'), // Пробрасываем локальному серверу путь наружу для для заказчика
spritesmith         = require('gulp.spritesmith');// Спрайты

In the same place, in the documentation for the galp, everything is written here in detail

task.gulp('default', ['таски которые хотите выполнить перед тем как выполнить default через запятую ']),
for example:
task.gulp('default', ['watch', 'clear']);

Here is a good article on gulp