Чтобы добавить jQuery и Bootstrap в Gulp, вам понадобятся несколько шагов.
Шаг 1: Установка Gulp
Убедитесь, что у вас установлен Gulp, выполнив следующую команду в вашей командной строке:
npm install gulp-cli -g npm install gulp -D
Шаг 2: Установка bootstrap и jquery
Установите Bootstrap и jQuery, выполнив следующие команды:
npm install jquery npm install bootstrap
Шаг 3: Создание Gulpfile.js
Создайте файл с именем Gulpfile.js в корне вашего проекта и добавьте в него следующий код:
var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); // Конкатенация и сжатие JS-файлов gulp.task('scripts', function() { return gulp.src([ 'node_modules/jquery/dist/jquery.js', 'node_modules/bootstrap/dist/js/bootstrap.js', 'src/js/*.js' ]) .pipe(concat('bundle.js')) .pipe(uglify()) .pipe(gulp.dest('dist/js')); }); // Копирование CSS-файлов Bootstrap gulp.task('styles', function() { return gulp.src('node_modules/bootstrap/dist/css/bootstrap.css') .pipe(gulp.dest('dist/css')); }); // Запуск задач при изменении файлов gulp.task('watch', function() { gulp.watch('src/js/*.js', gulp.series('scripts')); }); // Запуск всех задач по умолчанию gulp.task('default', gulp.parallel('scripts', 'styles', 'watch'));
Шаг 4: Запуск Gulp
Выполните следующую команду в вашей командной строке для запуска Gulp:
gulp
Gulp будет выполняться в фоновом режиме и автоматически соберет ваши js-файлы в один файл (bundle.js) в папке dist/js, а также скопирует файлы CSS Bootstrap в папку dist/css.
Теперь у вас есть готовый Gulp-проект с подключенными jQuery и Bootstrap. Вы можете использовать bundle.js и bootstrap.css для вашего проекта.