Как правильно подключить slick slider в gulp проект?

Question

[ramer ram]

В 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>

В libs.styl

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

В 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
        }));
});

Вот проект https://github.com/ramer88/bislite

Comments

[Айнур Валиев]

Как подключить slick slider?

Answer 1

[rusweek]

у меня через less.
что очень важно для slick - порядок подключения

@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';

до этого было, что Dmitrijs Balcers (less) '../slick/slick.css' и Dmitrijs Balcers (less) '../slick/slick-theme.css' импортировал в конец и все плыло, но потом почитал документацию и решил переместить в начало. И вот удача

В коде сумбур. Чужое переделываю.

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}));
});