Связать модуль Bootstrap со встроенным в Wordpress jQuery?

Question

Я пытаюсь создать собственный сайт начальной загрузки (версия 4) на WordPress, используя npm и gulp, но поскольку для начальной загрузки требуется jquery, я продолжал получать эту ошибку при попытке запустить gulp:

Error: Cannot find module 'jquery'

Я установил popper а также bootstrap используя gulp и добавили следующие строки в мой gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');
var popperjs = require('popper.js');
var bootstrap = require('bootstrap');

gulp.task('sass', function(){
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', './sass/**/*.scss'])
    .pipe(sass())
    .pipe(gulp.dest('./'))
});

gulp.task('js', function(){
    return gulp.src(['node_modules/popper.js/dist/popper.min.js', 'node_modules/bootstrap/dist/js/bootstrap.min.js', './js/*.js'])
    .pipe(gulp.dest('./js'))
});

gulp.task('watch', function(){
    gulp.watch('./sass/**/*.scss', ['sass']);
    gulp.watch('./js/*.js', ['js']);
});

gulp.task('default', ['sass', 'js', 'watch']);

---

Сначала я попытался установить jQuery через npm, что вызвало другую ошибку ( Использование npm для установки jquery & bootstrap4 возвращает ошибку неопределенного свойства), но потом я вспомнил, что Wordpress имеет jQuery, включенный в cms, поэтому я удалил установленный npm jQuery и попытался выяснить, как использовать WordPress JQuery вместо.

Итак, tldr: как связать мой модуль Bootstrap со встроенным в Wordpress jQuery

/wp-include/js/jquery.js

Answer 1

Чтобы включить один или несколько внешних js-сценариев с gulp, попробуйте gulp-concat вместе с "gulp-environment", чтобы удовлетворить потребности вашей среды.

var gulp = require('gulp'),
    path = require('path'),
    concat = require('gulp-concat'),
    environments = require('gulp-environments'),
    development = environments.development,
    production = environments.production,
    dev = environments.make("dev"),
    prod = environments.make("prod"),
///other imports///

// set paths to files to be concatenated

var config = {
    jsConcatFiles: [
        './src/scripts/js/concat/jquery.js',
        './src/scripts/js/concat/bootstrap.js',
        './src/scripts/js/concat/popper.js'
    ],
};

// set src build files
var src = {
  jsmin:'./src/scripts/js/min/**/*.js',
  jssp:'./src/scripts/js/sp_js/**/*.js',
  jsspcon:'./src/scripts/js/concat/**/*.js',

};
// set destination paths
var dest = {
  maps:'../maps',
  js:'./public_html/scripts/js/',
  jsmin:'./src/scripts/js/min/',
  jssp:'./src/scripts/js/sp_js/',
  jsspcon:'./src/scripts/js/concatonated/',

};
// ////////////////////////////////////////////////
// Scripts Tasks
// ///////////////////////////////////////////////

// check if files are new / copy 
gulp.task('scripts:copy',['scripts:copymin'], function(cb){
    return gulp.src(src.jssp)
    .pipe(newer(dest.js))
    .pipe(gulp.dest(dest.js),cb)

});

// copy min file (production)
gulp.task('scripts:copymin',['scripts:concat'], function(cb){
    return gulp.src(src.jsmin)
    .pipe(newer(dest.js))
    .pipe(gulp.dest(dest.js),cb)

});

// collect all the files required 
// dev: maps / expand code / reload
// prod: minify / rename

gulp.task('scripts:concat', function(cb) {
  return gulp.src(config.jsConcatFiles)
  // this will only init sourcemaps in development
    .pipe(dev(sourcemaps.init()))
    .pipe(concat('sp_all.js'))
    .pipe(gulp.dest(dest.jsspcon))
    .pipe(rename({suffix: '.min'}))
    // only minify the compiled JS in production mode
    .pipe(prod(uglify()))
    .pipe(dev(sourcemaps.write(dest.maps)))
    .pipe(gulp.dest(dest.jsmin),cb)
    .pipe(reload({stream:true}));
});
gulp.task('scripts', ['scripts:copy'])