Как добавить jquery и bootstrap в gulp?

Question

[nonamer_city]

Приветствую.
Подскажите как правильно добавить js файлы из bootstrap и jquery?
Я импортирую их в файле js

import  "jquery/dist/jquery"
import "../../node_modules/popper.js/dist/umd/popper"
import "../../node_modules/bootstrap/dist/js/bootstrap.bundle"

мой конфиг gulp выглядит так

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const watch = require('gulp-watch');

const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const sourcemap = require('gulp-sourcemaps')
const pug = require('gulp-pug')
const del = require('del')

gulp.task('pug', (callback) => {
    return gulp.src('./src/pug/pages/**/*.pug')
        .pipe(pug({
            pretty: true
        }))
        .pipe(gulp.dest('./build/'))
        .pipe(browserSync.stream())
    callback()
})


gulp.task('scss', (callback) => {
    return gulp.src('./src/scss/style.scss')
        .pipe(sourcemap.init())
        .pipe(sass())
        .pipe(autoprefixer({
            overrideBrowserslist: ['last 4 versions']
        }))
        .pipe(sourcemap.write())
        .pipe(gulp.dest('./build/css/'))
        .pipe(browserSync.stream())
    callback()
});

gulp.task('cleanbuild', () => {
    return del('./build')
})

gulp.task('copyimg', (callback) => {
    return gulp.src('./src/img/**/*.*')
        .pipe(gulp.dest('./build/img/'))
    callback()
})

gulp.task('copyjs', (callback) => {
    return gulp.src('./src/js/**/*.*')
        .pipe(gulp.dest('./build/js/'))
    callback()
})

gulp.task('watch', () => {
    watch(['./build/js/**/*.*', './build/img/**/*.*'], gulp.parallel(browserSync.reload))
    watch(['./src/scss/**/*.scss'], gulp.parallel('scss'))
    watch(['./src/pug/**/*.pug'], gulp.parallel('pug'))
    watch(['./src/img/**/*.*'], gulp.parallel('copyimg'))
    watch(['./src/js/**/*.*'], gulp.parallel('copyjs'))
});



gulp.task('server', () => {
    browserSync.init({
        server: {
            baseDir: "./build/"
        }
    });
});

gulp.task('default',
    gulp.series(
        gulp.parallel('cleanbuild'),
        gulp.parallel('scss', 'pug', 'copyimg', 'copyjs'),
        gulp.parallel('server', 'watch')
    )
);

Answer 1

[black1277]

Вам нужно использовать сборщик проекта webpack Gulp и webpack - как и зачем подружить системы сбо...
Как альтернативу можно попробовать сочетание плагинов rollup и babel

Answer 2

[bondarenkoIlya]

На подобии такого можно сделать

// libs to css

gulp.task('css', function () {
	return gulp.src([
		'node_modules/normalize.css/normalize.css',
		'node_modules/slick-carousel/slick/slick.css'
	])
		.pipe(concat('_libs.scss'))
		.pipe(gulp.dest('app/scss'))
		.pipe(browserSyns.reload({ stream: true }))
});

// js

gulp.task('js', function () {
	return gulp.src([
		'node_modules/slick-carousel/slick/slick.js'
	])
		.pipe(concat('libs.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('app/js'))
		.pipe(browserSyns.reload({ stream: true }))
});