Brendan Castaneda

Вот так вот можно подключить Swiper слайдер в Gulp.
Слайды будут крутить бесконечно, через каждые 3 секунды - "delay: 3000"
При наведении указателя мыши на слайдер он остановится.

1. Файлы слайдера подключаются в gulpfile.js
   node_modules/swiper/swiper-bundle.min.css
   node_modules/swiper/swiper-bundle.js
   
2. Затем к index.html подключаем наши файлы JS и CSS.
   
3. В JS файле пишем настройки для Swiper слайдер, то как он будет работать.
   

P.S. Чтобы использовать импорты (import ****) в gulpfile.js укажите в package.json файле "type": "module",
Ниже всё показал, вроде всё работает. Сборка может быть сыроватой!

Структура готовой сборки
Start_Gulp
├── .gitignore
├── gulpfile.js
├── package-lock.json
├── package.json
├── app
│ ├── .htaccess
│ ├── index.html
│ ├── css
│ ├── fonts
│ │ └── Museo Cyrl 500.otf
│ ├── img
│ │ └── favicon.png
│ ├── js
│ │ └── main.js
│ └── scss
│ ├── style.scss
│ ├── _fonts.scss
│ ├── _global.scss
│ └── _vars.scss
└── build
├── css
│ ├── libs.min.css
│ └── style.min.css
└── js
├── libs.min.js
└── main.min.js

package.json

{
  "name": "start-gulp",
  "version": "3.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Brendan8c",
  "license": "ISC",
  "type": "module",
  "devDependencies": {
    "browser-sync": "^2.29.3",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^9.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-cssmin": "^0.2.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.1.0",
    "gulp-terser": "^2.1.0",
    "gulp-watch": "^5.0.1",
    "jquery": "^3.7.1",
    "normalize.css": "^8.0.1",
    "smoothscroll-polyfill": "^0.4.4"
  },
  "dependencies": {
    "sass": "^1.69.5",
    "swiper": "^11.0.5"
  }
}

gulpfile.js

import gulp from 'gulp';
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
import rename from 'gulp-rename';
import browserSync from 'browser-sync';
import autoprefixer from 'gulp-autoprefixer';
import concat from 'gulp-concat';
import terser from 'gulp-terser';
import cssmin from 'gulp-cssmin';
import watch from 'gulp-watch';

gulp.task('style', function () {
  return gulp.src(['node_modules/normalize.css/normalize.css', 'node_modules/swiper/swiper-bundle.min.css']).pipe(concat('libs.min.css')).pipe(cssmin()).pipe(gulp.dest('app/css'));
});

gulp.task('script', function () {
  return gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/swiper/swiper-bundle.js']).pipe(concat('libs.min.js')).pipe(terser()).pipe(gulp.dest('app/js'));
});

gulp.task('script-min', function () {
  return gulp.src('app/js/main.js').pipe(concat('main.min.js')).pipe(terser()).pipe(gulp.dest('app/js'));
});

gulp.task('sass', function () {
  return gulp
    .src('app/scss/**/*.scss')
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(
      autoprefixer({
        overrideBrowserslist: ['last 8 versions'],
      })
    )
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({ stream: true }));
});

gulp.task('js-watch', function () {
  gulp.watch('app/js/main.js', gulp.series('script-min')).on('change', browserSync.reload);
});

gulp.task('sass-watch', function () {
  return gulp
    .src('app/scss/**/*.scss')
    .pipe(watch('app/scss/**/*.scss').on('change', gulp.series('sass')))
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(
      autoprefixer({
        overrideBrowserslist: ['last 8 versions'],
      })
    )
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({ stream: true }));
});

gulp.task('html', function () {
  return gulp.src('app/*.html').pipe(browserSync.reload({ stream: true }));
});

gulp.task('js', function () {
  return gulp.src('app/js/*.js').pipe(browserSync.reload({ stream: true }));
});

gulp.task('watch', function () {
  gulp.watch('app/scss/**/*.scss', gulp.parallel('sass-watch'));
  gulp.watch('app/*.html', gulp.parallel('html'));
  gulp.watch('app/js/*.js', gulp.parallel('js-watch'));
});

gulp.task('browser-sync', function () {
  browserSync.init({
    server: {
      baseDir: 'app/',
    },
  });
});

gulp.task('default', gulp.parallel('style', 'script', 'script-min', 'sass-watch', 'js-watch', 'watch', 'browser-sync'));

main.js

new Swiper('.swiper-container', {
  slidesPerView: 1, // Количество слайдов на один просмотр (слайды, видимые одновременно в контейнере слайдера).
  loop: true, // Режим непрерывного цикла.
  autoplay: {
    delay: 3000, // Задержка между переходами.
    pauseOnMouseEnter: true, // При включении автовоспроизведение будет приостановлено при наведении указателя (мыши) на контейнер Swiper.
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true, // Делаем точки кликабельными
  },
  speed: 800, // Продолжительность анимации при переключении точек в миллисекундах
});

index.html

<head>
  <link rel="stylesheet" href="css/libs.min.css" />
  <link rel="stylesheet" href="css/style.min.css" />
</head>
<body>
<!-- swiper-container Название класса как и в main.js -->
<div class="swiper-container">
  <!-- swiper-wrapper Название класса это используем -->
  <div class="swiper-wrapper">
    <!-- swiper-slide Название класса это используем для каждого из слайдов -->
    <div class="swiper-slide">
      <img src="img/Image_1.webp" />
    </div>
    <div class="swiper-slide">
      <img src="img/Image_2.webp" />
    </div>
    <div class="swiper-slide">
      <img src="img/Image_3.webp" />
    </div>
  </div>
<!-- swiper-pagination Название класса как и в main.js -->
  <div class="swiper-pagination"></div>
</div>
  <script src="js/libs.min.js"></script>
  <script src="js/main.min.js"></script>
</body>

На этом сайте всё довольно подробно описано.

const gulp = require('gulp');
const smartGrid = require('smart-grid');
 
const options = {
   /* your grid settings here */
};
 
function grid(done){
   smartGrid('path-to-your-folder', options);
   done();
}
 
gulp.task('grid', grid);