How to properly include slick slider in gulp project?

Question

css

In index.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">

<script src="static/js/jquery.js"></script>
    <script src="static/js/libs.min.js"></script>
    <script src="static/js/main.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

In libs.style

@import '../../../node_modules/slick-carousel/slick/slick.css'

In gulp>tasks>scripts.js

$.gulp.task('libsJS:dev', () => {
    return $.gulp.src(['node_modules/jquery/dist/jquery.min.js',
                       'node_modules/slick-carousel/slick/slick.min.js'])
        .pipe($.gp.concat('libs.min.js'))
        .pipe($.gulp.dest('./build/static/js/'))
        .pipe($.browserSync.reload({
            stream: true
        }));
});

Here is the project https://github.com/ramer88/bislite

Answer 1

I have through less.
what is very important for slick is the connection order

@import (less) '../slick/slick.css';
@import (less) '../slick/slick-theme.css';
@import (less) '../css/animate.css';
@import (less) '../css/bootstrap.css';
@import (less) '../../bower_components/fotorama/fotorama.css';

before that, Dmitrijs Balcers (less) '../slick/slick.css' and Dmitrijs Balcers (less) '../slick/slick-theme.css' imported to the end and everything was floating, but then I read the documentation and decided to move to the beginning. And here's the luck
In the code confusion. I redo someone else.

gulp.task('less', function () {
    return gulp.src('src/less/**/*.less')
        .pipe(sourcemaps.init())
        .pipe(less({
            paths: [path.join(__dirname, 'less', 'includes')],

        }))
        .pipe(autoprefixer(['last 15 versions', '>1%', 'ie 8', 'ie 7'], {cascade: true}))
    
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('src/css'))
        .pipe(browserSync.reload({stream: true}));
});