Linking Bootstrap module to the Wordpress in-built jQuery?

Question

I am trying to build a WordPress site with bootstrap 4 as a dependency using npm and gulp but because bootstrap requires jQuery, I kept on getting this error when trying to run gulp:

Error: Cannot find module 'jquery'

I installed popper and bootstrap using gulp and have added the following lines to my 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']);

I initially tried installing jQuery via npm which caused a different error ( Using gulp to install jquery & bootstrap4 returns undefined property error ) but then I remembered that Wordpress has jQuery included with the cms so I removed the npm-installed jQuery and trying to find out how to make bootstrap utilise the WordPress jQuery instead.

So tldr: How do I link my Bootstrap module to the in-build Wordpress jQuery in:

/wp-include/js/jquery.js

So you're building a custom [tag:twitter-bootstrap-4] with [tag:gulp] that you're then including in an otherwise-unrelated [tag:WordPress] site (as in, you're not building WordPress with this bootstrap as a dependency and then shipping the whole thing)? — msanford, Apr 16 '18 at 19:51
Perhaps useful https://stackoverflow.com/questions/14608681/can-i-use-twitter-bootstrap-without-jquery — msanford, Apr 16 '18 at 19:53
@msanford No I am not building a custom bootstrap-4 but I'm building a wordpress site with bootstrap as a dependency (as you mentioned in brackets). — AndrewL64, Apr 16 '18 at 19:55
Ok, are you using gulp to build wordpress as well (or just to build bootstrap)? — msanford, Apr 16 '18 at 19:56
@msanford No. I downloaded and installed wordpress separately then created a package.json as well as a gulpfile within the custom theme folder after. — AndrewL64, Apr 16 '18 at 19:58

score 0 · Answer 1 · answered Apr 20 '18 at 08:31

To include one or more external js scripts with gulp, try 'gulp-concat' along with 'gulp-environments' to allow for your environment needs.

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'])

Linking Bootstrap module to the Wordpress in-built jQuery?

1 Answers1