S
S
Sectorrbs2021-05-13 22:50:51
gulp.js
Sectorrbs, 2021-05-13 22:50:51

How to connect Slick-slider via Gulp?

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 the question

In order to leave comments, you need to log in

1 answer(s)
R
Roman Serdyuk, 2021-05-16
@budfy

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.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question