Generate a vendors.js with custom bootstrap compilation + Gulp

{{cookiecutter.project_slug}}/gulpfile.js

@@ -10,6 +10,7 @@ var gulp = require('gulp'),
       sass = require('gulp-sass'),
       autoprefixer = require('gulp-autoprefixer'),
       cssnano = require('gulp-cssnano'),
+      concat = require('gulp-concat'),
       rename = require('gulp-rename'),
       del = require('del'),
       plumber = require('gulp-plumber'),
@@ -25,8 +26,17 @@ var gulp = require('gulp'),
 // Relative paths function
 var pathsConfig = function (appName) {
   this.app = "./" + (appName || pjson.name);
+  var vendorsRoot = 'node_modules/';
 
   return {
+    {% if cookiecutter.custom_bootstrap_compilation == 'y' %}
+    bootstrapSass: vendorsRoot + '/bootstrap/scss',
+    vendorsJs: [
+      vendorsRoot + 'jquery/dist/jquery.slim.js',
+      vendorsRoot + 'popper.js/dist/umd/popper.js',
+      vendorsRoot + 'bootstrap/dist/js/bootstrap.js'
+    ],
+    {% endif %}
     app: this.app,
     templates: this.app + '/templates',
     css: this.app + '/static/css',
@@ -49,7 +59,7 @@ gulp.task('styles', function() {
     .pipe(sass({
       includePaths: [
         {% if cookiecutter.custom_bootstrap_compilation == 'y' %}
-        'node_modules/bootstrap/scss',
+        paths.bootstrapSass,
         {% endif %}
         paths.sass
       ]
@@ -72,6 +82,17 @@ gulp.task('scripts', function() {
     .pipe(gulp.dest(paths.js));
 });
 
+// Vendor Javascript minification
+gulp.task('vendor-scripts', function() {
+  return gulp.src(paths.vendorsJs)
+    .pipe(concat('vendors.js'))
+    .pipe(gulp.dest(paths.js))
+    .pipe(plumber()) // Checks for errors
+    .pipe(uglify()) // Minifies the js
+    .pipe(rename({ suffix: '.min' }))
+    .pipe(gulp.dest(paths.js));
+});
+
 // Image compression
 gulp.task('imgCompression', function(){
   return gulp.src(paths.images + '/*')
@@ -108,5 +129,5 @@ gulp.task('watch', function() {
 
 // Default task
 gulp.task('default', function() {
-    runSequence(['styles', 'scripts', 'imgCompression'], ['runServer', 'browserSync', 'watch']);
+    runSequence(['styles', 'scripts', {% if cookiecutter.custom_bootstrap_compilation == 'y' %}'vendor-scripts', {% endif %}'imgCompression'], ['runServer', 'browserSync', 'watch']);
 });

{{cookiecutter.project_slug}}/package.json

@@ -32,6 +32,9 @@
     "del": "^2.2.2",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.1",
+    {% if cookiecutter.custom_bootstrap_compilation == 'y' %}
+    "gulp-concat": "^2.6.1",
+    {% endif %}
     "gulp-cssnano": "^2.1.2",
     "gulp-imagemin": "^3.0.3",
     "gulp-pixrem": "^1.0.0",

{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html

@@ -94,12 +94,19 @@
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     {% block javascript %}
+      {% endraw %}{% if cookiecutter.custom_bootstrap_compilation == "y" and cookiecutter.js_task_runner == "Gulp" %}{% raw %}
+      <!-- Vendor dependencies bundled as one file-->
+      {% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% compress js %}{% endraw %}{% endif %}{% raw %}
+      <script src="{% static 'js/vendors.js' %}"></script>
+      {% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %}
+      {% endraw %}{% else %}{% raw %}
       <!-- Required by Bootstrap v4 beta -->
       <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
 
       <!-- Your stuff: Third-party javascript libraries go here -->
+      {% endraw %}{% endif %}{% raw %}
 
       <!-- place project specific Javascript in this file -->
       {% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% compress js %}{% endraw %}{% endif %}{% raw %}