borodin-dev/gulpfile.js

## gulpfile.js
// Подключаем Gulp
var gulp = require("gulp");
// Подключаем плагины Gulp
var sass = require("gulp-sass"), // переводит SASS в CSS
    cssnano = require("gulp-cssnano"), // Минимизация CSS
    autoprefixer = require('gulp-autoprefixer'), // Проставлет вендорные префиксы в CSS для поддержки старых браузеров
    imagemin = require('gulp-imagemin'), // Сжатие изображений
    concat = require("gulp-concat"), // Объединение файлов - конкатенация
    uglify = require("gulp-uglify"), // Минимизация javascript
    rename = require("gulp-rename"), // Переименование файлов
    browserSync = require('browser-sync');


// Создаем простой таск
gulp.task('myFirstTask', function() {
    console.log('Привет, я твой первый таск!');
});

// Запуск тасков по умолчанию
gulp.task("default", ["myFirstTask"]);


// Копирование файлов HTML в папку dist
gulp.task("html", function() {
    return gulp.src("src/*.html")
        .pipe(gulp.dest("dist"));
});

// Объединение, компиляция Sass в CSS, простановка венд. префиксов и дальнейшая минимизация кода
gulp.task("sass", function() {
    return gulp.src(["node_modules/bootstrap/scss/bootstrap.scss","src/sass/*.sсss"])
        .pipe(concat('styles.sсss'))
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(cssnano())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest("dist/css"));
});

// Объединение и сжатие JS-файлов
gulp.task("scripts", function() {
    return gulp.src(["node_modules/bootstrap/dist/js/bootstrap.min.js","node_modules/jquery/dist/jquery.min.js","src/js/*.js"]) // директория откуда брать исходники
        .pipe(concat('scripts.js')) // объеденим все js-файлы в один
        .pipe(uglify()) // вызов плагина uglify - сжатие кода
        .pipe(rename({ suffix: '.min' })) // вызов плагина rename - переименование файла с приставкой .min
        .pipe(gulp.dest("dist/js")); // директория продакшена, т.е. куда сложить готовый файл
});

// Сжимаем картинки
gulp.task('imgs', function() {
    return gulp.src("src/images/*.+(jpg|jpeg|png|gif)")
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{ removeViewBox: false }],
            interlaced: true
        }))
        .pipe(gulp.dest("dist/images"))
});

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDIR: ["./", "./src"]
        },
        notify: false

    });

    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);
});

// Задача слежения за измененными файлами
gulp.task("watch", function() {
    gulp.watch("src/*.html", ["html"]);
    gulp.watch("src/js/*.js", ["scripts"]);
    gulp.watch("src/sass/*.scss", ["sass"]);
    gulp.watch("src/images/*.+(jpg|jpeg|png|gif)", ["imgs"]);
});

// Запуск тасков по умолчанию
gulp.task("default", ["html", "sass", "scripts", "imgs", "watch", "browser-sync"]);

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">-->
    <link rel="stylesheet" href="css/style.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>
<h1>test</h1>
<img src="./images/deadpool-DMC.jpg" alt="Logo">

<script src="js/scripts.min.js"></script>
<!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>-->
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>-->
</body>
</html>
	// Подключаем Gulp
	var gulp = require("gulp");
	// Подключаем плагины Gulp
	var sass = require("gulp-sass"), // переводит SASS в CSS
	cssnano = require("gulp-cssnano"), // Минимизация CSS
	autoprefixer = require('gulp-autoprefixer'), // Проставлет вендорные префиксы в CSS для поддержки старых браузеров
	imagemin = require('gulp-imagemin'), // Сжатие изображений
	concat = require("gulp-concat"), // Объединение файлов - конкатенация
	uglify = require("gulp-uglify"), // Минимизация javascript
	rename = require("gulp-rename"), // Переименование файлов
	browserSync = require('browser-sync');


	// Создаем простой таск
	gulp.task('myFirstTask', function() {
	console.log('Привет, я твой первый таск!');
	});

	// Запуск тасков по умолчанию
	gulp.task("default", ["myFirstTask"]);


	// Копирование файлов HTML в папку dist
	gulp.task("html", function() {
	return gulp.src("src/*.html")
	.pipe(gulp.dest("dist"));
	});

	// Объединение, компиляция Sass в CSS, простановка венд. префиксов и дальнейшая минимизация кода
	gulp.task("sass", function() {
	return gulp.src(["node_modules/bootstrap/scss/bootstrap.scss","src/sass/*.sсss"])
	.pipe(concat('styles.sсss'))
	.pipe(sass())
	.pipe(autoprefixer({
	browsers: ['last 2 versions'],
	cascade: false
	}))
	.pipe(cssnano())
	.pipe(rename({ suffix: '.min' }))
	.pipe(gulp.dest("dist/css"));
	});

	// Объединение и сжатие JS-файлов
	gulp.task("scripts", function() {
	return gulp.src(["node_modules/bootstrap/dist/js/bootstrap.min.js","node_modules/jquery/dist/jquery.min.js","src/js/*.js"]) // директория откуда брать исходники
	.pipe(concat('scripts.js')) // объеденим все js-файлы в один
	.pipe(uglify()) // вызов плагина uglify - сжатие кода
	.pipe(rename({ suffix: '.min' })) // вызов плагина rename - переименование файла с приставкой .min
	.pipe(gulp.dest("dist/js")); // директория продакшена, т.е. куда сложить готовый файл
	});

	// Сжимаем картинки
	gulp.task('imgs', function() {
	return gulp.src("src/images/*.+(jpg\|jpeg\|png\|gif)")
	.pipe(imagemin({
	progressive: true,
	svgoPlugins: [{ removeViewBox: false }],
	interlaced: true
	}))
	.pipe(gulp.dest("dist/images"))
	});

	gulp.task('browser-sync', function() {
	browserSync({
	server: {
	baseDIR: ["./", "./src"]
	},
	notify: false

	});

	gulp.watch("app/scss/*.scss", ['sass']);
	gulp.watch("app/*.html").on('change', browserSync.reload);
	});

	// Задача слежения за измененными файлами
	gulp.task("watch", function() {
	gulp.watch("src/*.html", ["html"]);
	gulp.watch("src/js/*.js", ["scripts"]);
	gulp.watch("src/sass/*.scss", ["sass"]);
	gulp.watch("src/images/*.+(jpg\|jpeg\|png\|gif)", ["imgs"]);
	});

	// Запуск тасков по умолчанию
	gulp.task("default", ["html", "sass", "scripts", "imgs", "watch", "browser-sync"]);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>

	<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">-->
	<link rel="stylesheet" href="css/style.min.css">
	</head>
	<body>
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<a class="navbar-brand" href="#">Navbar</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	</nav>
	<h1>test</h1>
	<img src="./images/deadpool-DMC.jpg" alt="Logo">

	<script src="js/scripts.min.js"></script>
	<!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
	<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>-->
	<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>-->
	</body>
	</html>