Setting up Gulp (creating folders and files)?

Question

gulp.js

I want the base folders and files to be created in a new project when starting the gallp. Tell me who knows, I just started to deal with the
gallp

1. src
   
2. src/css
   
3. src/sass
   
4. src/img
   
5. src/img/dist
   
6. src/img/src
   
7. src/js
   

Files:

1. gitignore
   
2. src/index.html
   
3. src/sass/main.sass
   
4. src/js/main.js
   

What for?
So that the gulp command creates a basic set of files and folders and I do not need to spend time on this

My gulpfile.js (Did by video)

let preprocessor = 'sass';

const {src, dest, parallel, series, watch} = require('gulp');
const browser_sync = require('browser-sync').create();
const concat = require('gulp-concat');
const uglify = require('gulp-uglify-es').default;
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const clean_css = require('gulp-clean-css');
const imagemin = require('gulp-imagemin');
const newer = require('gulp-newer');
const del = require('del')

function browserSync(){
    browser_sync.init({
        server: {baseDir: 'src/'},
        notify: false,
        online: true
    })
}

function scripts() {
    return  src([
        'node_modules/jquery/dist/jquery.min.js',
        'src/js/app.js'
    ])
    .pipe(concat('app.min.js'))
    .pipe(uglify())
    .pipe(dest('src/js/'))
    .pipe(browser_sync.stream())
}

function styles() {
    return src('src/' + preprocessor + '/main.' + preprocessor)
    .pipe(eval(preprocessor)())
    .pipe(concat('app.min.css'))
    .pipe(autoprefixer({
        overrideBrowserslist: ['last 10 versions'], 
        grid: true
    }))
    .pipe(clean_css((
        {level: {
            1: {
                specialComments: 0
            }
        }
    }
    )))
    .pipe(dest('src/css/'))
    .pipe(browser_sync.stream())
}

function optimizeImg() {
    return src('src/img/src/**/*')
    .pipe(newer('src/img/dist'))
    .pipe(imagemin())
    .pipe(dest('src/img/dist'))
}

function cleanImg(){
    return del('src/img/dist/**/*', 
    {
        force: true
    })
}

function cleanDist(){
    return del('dist/**/*', 
    {
        force: true
    })
}

function buildCopy(){
    return src([
        'src/css/**/*.min.css',
        'src/js/**/*min.js',
        'src/img/dist/**/*',
        'src/**/*.html',
    ],
    {
       base: 'src' 
    })
    .pipe(dest('dist'))
}

function startWatch() {
    watch('src/**/*.html').on('change', browser_sync.reload);
    watch('src/img/src/**/*', optimizeImg);
    watch('src/**/' + preprocessor + '/**/*', styles);
    watch(['src/**/*.js', '!app/**/*.min.js'], scripts);
}

exports.browserSync = browserSync;
exports.scripts = scripts;
exports.styles = styles;
exports.optimizeImg = optimizeImg;
exports.cleanImg = cleanImg;
exports.build = series(cleanDist, styles, scripts, optimizeImg, buildCopy);


exports.default = parallel(styles, scripts, browserSync, startWatch);

Answer 1

I asked myself this question, but when I googled, I kind of thought that you couldn’t do this with a gallop, or I googled badly