Help in creating tasks for Gulp, is the logic correct?

Question

Node.js

I set myself the task of making a starting template for layout of relatively simple and unloaded landing pages. After looking at enough examples, I chose the plugins and libraries that I needed.
Project structure

Package.json file

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.6",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-clean-css": "^2.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^3.1.1",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.3.0",
    "gulp-uglify": "^2.0.0",
    "gulp-watch": "^4.3.11"
  },
  "dependencies": {
    "font-awesome": "^4.7.0"
  }
}

bower.json file

{
  "name": "project",
  "version": "1.0.0",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "normalize.css": "*",
    "jquery": "2.*",
    "bootstrap-sass": "*"
  }
}

gulpfile.js

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    prefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    cleancss = require('gulp-clean-css'),
    concatcss = require('gulp-concat'),
    imagemin = require('gulp-imagemin'),
    browserSync = require("browser-sync");

//Пути к папкам
var serverPath  = 'src';

var path = {
        build: { 
            html: 'build/',
            js: 'build/js/',
            css: 'build/css/',
            img: 'build/img/',
            fonts: 'build/fonts/'
        },
        src: { 
            html: 'src/*.html', 
            js: 'src/js/main.js',
            style: 'src/style/main.scss',
            img: 'src/img/**/*.*',
            fonts: 'src/fonts/'
        },
        watch: { 
            html: 'src/**/*.html',
            js: 'src/js/**/*.js',
            style: 'src/style/**/*.scss',
            img: 'src/img/**/*.*',
            fonts: 'src/fonts/'
        },
        bower: {
            bootstrap: 'bower_components/bootstrap-sass'
            jquery: 'bower_components/jquery'
            normalize: 'bower_components/normalize.css'
        }
};


//Копирование Bootstrap в рабочую папку
gulp.task('copy-bootstrap', function () {
  gulp.src(path.bower.bootstrap + '/assets/**/*')
    .pipe(gulp.dest('src/sass/bootstrap'));


});

//Копирование Jquery в рабочую папку
gulp.task('copy-jquery', function () {
  gulp.src(path.bower.jquery + '/dist')
    .pipe(gulp.dest(src.js + '/jquery'));


});

//Копирование Normalize в рабочую папку
gulp.task('copy-normalize', function () {
  gulp.src(path.bower.normalize + '/normalize.css')
    .pipe(gulp.dest('src/sass/'));


});

//Копирование font-awesome
gulp.task('copy-font-awesome', function () {
    gulp.src('node_modules/font-awesome/fonts') 

        
});

//Сборка html
gulp.task('html', function () {
    gulp.src(path.src.html) 
        .pipe(gulp.dest(path.build.html)) 
        .pipe(reload({stream: true})); 
});

//Сборка js
gulp.task('js', function () {
    gulp.src() 


});

//Cборка sass
gulp.task('sass', function () {
    gulp.src() 

        
});

//Сборка шрифтов
gulp.task('fonts', function () {
    gulp.src() 

        
});

//Сжатие изображений
gulp.task('image', function () {
    gulp.src(path.src.img) 
        .pipe(imagemin({ 
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()],
            interlaced: true
        }))
        .pipe(gulp.dest(path.build.img)) 
        .pipe(reload({stream: true}));
});

//Запуск gulp
gulp.task('build', ['html', 'js', 'sass', 'fonts', 'image']);

gulp.task('serve', ['build'], function() {
    browserSync({
        port: 3000,
        notify: false,
        logPrefix: 'Project',
        server: {
            baseDir: serverPath,
            index: 'index.html'
        }
    });

    gulp.watch(serverPath + '/index.html', browserSync.reload);
    gulp.watch();
    gulp.watch();
});

To begin with, it is interesting to find out if all the most necessary plugins are present (maybe which ones are still worth throwing in), am I doing the transfer of files from bower_components and node_modules correctly, and did I build everything normally?
How to deal with bootstrap sass style files, fontawesome fonts, and standard jquery plugins from bootstrap? Approximately did not even find an adequate example for such a task.

Answer 1

I would also add gulp-rigger to build the html. to connect templates like: //= template/footer.html
and you also process each connected plugin manually. I suggest gulp-main-bower-files which will return all your bower components. and there you can do whatever you want. merge and minify for example.

Answer 2

You can also watch the screencast of Ilya Kantor on Gulp 4.0