Gulp - how to include bootstrap and jquery plugins?

Question

JavaScript

Hello. I collected gulp-sass for myself, one lesson each, but I don’t know how to connect bootstrap and how to connect jquery plugins. The matter is that I use only a grid a grid a bootstrap. I don't need all of it. Please tell me how to connect.

var gulp         = require('gulp'), // Подключаем Gulp
    sass         = require('gulp-sass'), //Подключаем Sass пакет,
    browserSync  = require('browser-sync'), // Подключаем Browser Sync
    concat       = require('gulp-concat'), // Подключаем gulp-concat (для конкатенации файлов)
    uglify       = require('gulp-uglifyjs'), // Подключаем gulp-uglifyjs (для сжатия JS)
    cssnano      = require('gulp-cssnano'), // Подключаем пакет для минификации CSS
    rename       = require('gulp-rename'); // Подключаем библиотеку для переименования файлов
    del          = require('del'); // Подключаем библиотеку для удаления файлов и папок
    imagemin     = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
    pngquant     = require('imagemin-pngquant'); // Подключаем библиотеку для работы с png
    cache        = require('gulp-cache'); // Подключаем библиотеку кеширования
    autoprefixer = require('gulp-autoprefixer');// Подключаем библиотеку для автоматического добавления префиксов


gulp.task('sass', function(){ // Создаем таск Sass
    return gulp.src('app/sass/**/*.sass') // Берем источник
        .pipe(sass()) // Преобразуем Sass в CSS посредством gulp-sass
        .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) // Создаем префиксы
        .pipe(gulp.dest('app/css')) // Выгружаем результата в папку app/css
        .pipe(browserSync.reload({stream: true})) // Обновляем CSS на странице при изменении
});

gulp.task('browser-sync', function() { // Создаем таск browser-sync
    browserSync({ // Выполняем browserSync
        server: { // Определяем параметры сервера
            baseDir: 'app' // Директория для сервера - app
        },
        notify: false // Отключаем уведомления
    });
});

gulp.task('scripts', function() {
    return gulp.src([ // Берем все необходимые библиотеки
        'app/libs/jquery/dist/jquery.min.js', // Берем jQuery
        'app/libs/magnific-popup/dist/jquery.magnific-popup.min.js' // Берем Magnific Popup
        ])
        .pipe(concat('libs.min.js')) // Собираем их в кучу в новом файле libs.min.js
        .pipe(uglify()) // Сжимаем JS файл
        .pipe(gulp.dest('app/js')); // Выгружаем в папку app/js
});

gulp.task('css-libs', ['sass'], function() {
    return gulp.src('app/css/libs.css') // Выбираем файл для минификации
        .pipe(cssnano()) // Сжимаем
        .pipe(rename({suffix: '.min'})) // Добавляем суффикс .min
        .pipe(gulp.dest('app/css')); // Выгружаем в папку app/css
});

gulp.task('watch', ['browser-sync', 'css-libs', 'scripts'], function() {
    gulp.watch('app/sass/**/*.sass', ['sass']); // Наблюдение за sass файлами в папке sass
    gulp.watch('app/*.html', browserSync.reload); // Наблюдение за HTML файлами в корне проекта
    gulp.watch('app/js/**/*.js', browserSync.reload);   // Наблюдение за JS файлами в папке js
});


gulp.task('clean', function() {
    return del.sync('dist'); // Удаляем папку dist перед сборкой
});

gulp.task('img', function() {
    return gulp.src('app/img/**/*') // Берем все изображения из app
        .pipe(cache(imagemin({  // Сжимаем их с наилучшими настройками с учетом кеширования
            interlaced: true,
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img')); // Выгружаем на продакшен
});


gulp.task('build', ['clean', 'sass', 'scripts'], function() {

    var buildCss = gulp.src([ // Переносим библиотеки в продакшен
        'app/css/main.css',
        'app/css/libs.min.css'
        ])
    .pipe(gulp.dest('dist/css'))

    var buildFonts = gulp.src('app/fonts/**/*') // Переносим шрифты в продакшен
    .pipe(gulp.dest('dist/fonts'))

    var buildJs = gulp.src('app/js/**/*') // Переносим скрипты в продакшен
    .pipe(gulp.dest('dist/js'))

    var buildHtml = gulp.src('app/*.html') // Переносим HTML в продакшен
    .pipe(gulp.dest('dist'));

});

gulp.task('clear', function () {
    return cache.clearAll();
})

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

Answer 1

use bootstrap 4, it uses sass
, it has a bootstrap.sass file in which components are imported, comments are not needed, you leave the grid.
I have my own sass file for each block and they are imported into style.sass (structure as in bootstrap.sass), bootstrap itself and library styles are also imported there. A single main file is included in the sass gallp, and watch keeps track of everything.

/*!
 * Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "scss/variables";
@import "scss/mixins";

// Reset and dependencies
@import "scss/normalize";
@import "scss/print";

// Core CSS
@import "scss/reboot";
@import "scss/type";
@import "scss/images";
@import "scss/grid";
@import "scss/tables";
@import "scss/forms";
@import "scss/buttons";

// Components
@import "scss/animation";
@import "scss/nav";
@import "scss/navbar";
@import "scss/dropdown";
@import "scss/breadcrumb";
@import "scss/pagination";
@import "scss/pager";
@import "scss/alert";
@import "scss/progress";
@import "scss/responsive-embed";
@import "scss/close";
@import "scss/list-group";

// Components w/ JavaScript
@import "scss/modal";
@import "scss/tooltip";

// Utility classes
@import "scss/utilities";
@import "scss/utilities-background";
@import "scss/utilities-spacing";
@import "scss/utilities-responsive";

js files are first coalified, then concatenated into 1 file.

Answer 2

If you only need a grid, download it and paste it into the head, as
Knowing badly gulp, you can include plugins in the head or under the body. Google Page Insighn is now talking about pushing libraries under body.
P.S. webdesign had a gulp starter kit with a bootstrap grid. Cantor also had a skincast about gulp.

Answer 3

gulp.task('scripts', function() {
return gulp.src([
'./app/libs/modernizr/modernizr.js',
'./app/libs/jquery/jquery-1.11.2.min.js ',
//'./app/libs/waypoints/waypoints.min.js',
'./app/libs/html5shiv/es5-shim.min.js',
'./app/libs/respond/respond.min .js',
//'./app/libs/animate/animate-css.js',
])
.pipe(concat('libs.js'))
.pipe(uglify()) //Minify libs.js
. pipe(gulp.dest('./app/js/'));
});