How to connect Slick-slider via Gulp?

Question

gulp.js

Can't set up slick-slider connection in gulp, gives very strange error in console

const {src, dest, watch, parallel, series} = require('gulp'); // с помощью ES6 вызываем из Gulp его методы: dest - перемещение файлов, watch - слежение за файлами
const scss = require('gulp-sass');  // преобразователь scss в css
const concat = require('gulp-concat');  // для объединения файлов
const uglify = require('gulp-uglify-es').default // для минификации js-файлов
const imagemin = require('gulp-imagemin')
const del = require('del') // для удаления папок перед обновлением
const autoprefixer = require('gulp-autoprefixer'); // для поддержки старых браузеров
const browserSync = require('browser-sync').create(); // автообновление

function styles() { // функция должна возвращать файл gulp(src)
    return src([
        'node_modules/slick-carousel/slick/slick.scss',
        'app/scss/*.scss']
    )  // все файлы в папке scss с расширением .scss
        .pipe(scss({
            outputStyle: 'compressed'  // минификация файла
        })) // проходит через этот pipe и становится css
        .pipe(concat('style.min.css')) // проходя через этот pipe, файл переименовывается в style.min.css
        .pipe(autoprefixer({
            overrideBrowserslist: ['last 10 version'],
            grid: true
        }))
        .pipe(dest('app/css')) // dest перемещает файл в указанное место
        .pipe(browserSync.stream()); // автообновление!!!
}

function scripts() {
    return src([
        'node_modules/slick-carousel/slick/slick.js',
        'node_modules/jquery/dist/jquery.js',
        'app/js/main.js'
    ])
        .pipe(concat('main.min.js'))  // объединение всех файлов js в один файл
        .pipe(uglify()) // минифицируем js-файлы
        .pipe(dest('app/js/'))
        .pipe(browserSync.stream());
}

function images() {
    return src('app/img/*.*') // путь до картинок *.* - все названия со всеми разрешениями
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.mozjpeg({quality: 75, progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))
        .pipe(dest('dist/img'))
}

function cleaner() {      // удаляет папку перед обновлением
    return del('dist')
}

function build() {     // все конвертируем в окончательный проект
    return src([
        'app/css/style.min.css',
        'app/fonts/**/*',
        'app/js/main.min.js',
        'app/*.html'
    ], {base: 'app'})
        .pipe(dest('dist'))
}

function browsersync() {
    browserSync.init({       // штука с офиц. сайта
        server: {
            baseDir: "app/"  // корень проекта
        }
    });
}

function watching() {
    watch(['app/scss/**/*.scss'], styles); // синтаксис --------- watch(['путь до файла'], действие с файлом) ** - во всех папках и подпапках идёт поиск. *.scss - все файлы с расширением .scss
    watch(['app/js/**/*.js', '!app/js/main.min.js'], scripts); // слежение за всеми файлами js кроме main.min.js (!)
    watch(['app/*.html']).on('change', browserSync.reload) // вызывает функции перезагрузки страницы при изменении в файлах html
}


exports.styles = styles;  // экспорт функции base
exports.scripts = scripts;
exports.images = images;
exports.watching = watching;
exports.browsersync = browsersync;
exports.cleaner = cleaner;

exports.build = series(cleaner, images, build);  // сначала выполняется функция cleaner, потом build. series - последовательное выполнение функций

exports.default = parallel(browsersync, watching)

<img src="https://habrastorage.org/webt/60/9d/83/609d83047c991340404019.png" alt="image"/><img src="https://habrastorage.org/webt/60/9d/83/609d830bb2aab741215704.png" alt="image"/>

Answer 1

gives a very strange error in the console

Where is the text of the error? And yes, jQuery needs to be included before the slick, not after, as you have.