NEW ! Bootstrap bumped to v5.x that uses vanilla JS so dropped jQuery (added as external), poppers.js and breakpoint slicer (mixin now available in Bootstrap 5).

Author: oguilleux

assets/src/scss/main.scss

@@ -1,8 +1,4 @@
 
-// dependencies
-@import "node_modules/breakpoint-sass/stylesheets/breakpoint",
-		"node_modules/breakpoint-slicer/stylesheets/breakpoint-slicer";
-
 // abstracts
 @import "abstracts/variables";
 

gulp/core/config/scripts.js

@@ -62,7 +62,7 @@ module.exports = deepMerge({
 								},
 							},
 							extractComments: false,
-						}),
+						})
 					]
 				}
 			},
@@ -94,13 +94,11 @@ module.exports = deepMerge({
 					]
 				},
 				plugins: [
-					new ESLintPlugin(),
-					new webpack.ProvidePlugin({
-						$: 'jquery',
-						jQuery: 'jquery',
-						'window.jQuery': 'jquery'
-					})
-				]
+					new ESLintPlugin()
+				],
+				externals: {
+					jquery: 'jQuery'
+				}
 			}
 		}
 	}

package-lock.json

@@ -67,10 +67,6 @@
     "webpack-stream": "6.1.2"
   },
   "dependencies": {
-    "bootstrap": "4.6.0",
-    "breakpoint-sass": "2.7.1",
-    "breakpoint-slicer": "2.0.0",
-    "jquery": "3.6.0",
-    "popper.js": "1.16.1"
+    "bootstrap": "5.0.1"
   }
 }

package.json

@@ -6,10 +6,9 @@
 
 - [ES6](https://github.com/lukehoban/es6features#readme) for JavaScript (transpiling with [Babel](https://babeljs.io/) and linting with [ESLint](https://eslint.org/))
 - [SASS](http://sass-lang.com/) preprocessor for CSS with [SASS Guidelines](https://sass-guidelin.es/#the-7-1-pattern)
-- [Breakpoint slicer](https://github.com/lolmaus/breakpoint-slicer/) to write faster media queries
-- [Bootstrap 4](https://getbootstrap.com/docs/4.6/getting-started/introduction/) as CSS framework ([customizable with SASS](https://getbootstrap.com/docs/4.6/getting-started/theming/#variable-defaults))
+- [Bootstrap 5](https://getbootstrap.com/docs/5.0/getting-started/introduction/) as CSS framework ([customizable with SASS](https://getbootstrap.com/docs/5.0/customize/sass/))
 - [Gulp 4](https://gulpjs.com/) & [Webpack 5](https://webpack.js.org/) to manage, compile and optimize theme assets
-- SVG Sprite : create a folder containing all your SVGs like `assets/src/svg/sprite` and run your watch or build 
+- SVG Sprite : create a folder containing all your SVGs like `assets/src/svg/sprite` and run your watch or build
 
 ## Requirements
 
@@ -27,7 +26,7 @@ Then, run the following commands in the theme's directory :
 Launch your watch for assets with :
 
 	npm run start
-	
+
 For production sites, create your build with :
 
 	npm run build