@funnelton

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

Я хочу, что бы при запуске галпа в новом проекте создавались базовые папки и файлы
Подскажите кто знает, я только начал разбиратсья с галпом
Папки:
  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);
  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ответы на вопрос 1
@awenn2015
Веб-программист самоучка
Сам задавался этим вопросом, но погуглив вроде подумал что с галпом этого не сделаешь, или плохо гуглил
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы