Настройка Gulp(создание папок и файлов)?

Question

[?]

Я хочу, что бы при запуске галпа в новом проекте создавались базовые папки и файлы
Подскажите кто знает, я только начал разбиратсья с галпом
Папки:

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

Файлы:

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

Зачем?
Что бы команда gulp создавала базовый набор файлов и папок и мне не нужно было тратить на это время

Мой gulpfile.js (Делал по видео)

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);

Comments

[Ankhena]

Зачем?
Что бы команда gulp создавала базовый набор файлов и папок и мне не нужно было тратить на это время

Вы же галп-то положили в папочку.
Аналогичным образом создайте остальные папки и файлы и считайте именно это базовым проектом.

Ведь потом вы решите, что в стартовом CSS нужно что-то поменять и будет странно редактировать это не в CSS.

[?]

Я это понимаю, но папки же всегда будут одинаковые, даже если и будут добавляться другие то в конкретном проекте, но базовые все так же будут оставатсья
Так же хотел создать базовые файлы, например, html - где уже подключен css и js

Answer 1

[Александр Антонов]

Сам задавался этим вопросом, но погуглив вроде подумал что с галпом этого не сделаешь, или плохо гуглил