Глоток 4 Dev и способ производства

Question

Я недавно решил обновить некоторые действительно старые файлы gulp до gulp 4. Я начал с нуля, поскольку мой рабочий процесс совершенно другой, и поэтому я хотел, чтобы сделанное на заказ решение соответствовало тому, как я сейчас работаю.

Пока у меня есть файл, который будет обрабатывать мои файлы, следить за изменениями и перезагружать браузер.У меня такой вопрос - в данный момент я передаю файлы в папку tmp для разработки, но когда я готов создать свои рабочие файлы, есть ли удобный способ включить эту логику в мои существующие функции или лучше специально создать новую функцию?для обработки окончательных процессов сборки?

Я в основном спрашиваю, потому что я мог бы сделать некоторую функцию buildStylesProd, но есть ли более более СУХОЙ способ обработки всего этого в одной функции?

Текущий прогресс:

// Initialize modules
// Importing specific gulp API functions lets us write them below as series() instead of gulp.series()
const { src, dest, watch, series, lastRun, parallel } = require('gulp');
// Importing all the Gulp-related packages we want to use
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const del = require('del');
const browserSync = require('browser-sync').create();
var replace = require('gulp-replace');

var settings = {
    reload: true,
    styles: true,
    scripts: true,
    clean: true
};

// File paths
const files = { 
    input: 'src/',
    tmp: 'tmp/',
    scssPath: 'src/scss/**/*.scss',
    jsPath: 'src/js/**/*.js',
    cssTmp: 'tmp/css',
    jsTmp: 'tmp/js',
    htmlPath: 'perch/templates/**/*.html',
    pageFiles: 'perch/templates/**/*.php',
}

// Watch for changes to the tmp directory
var startServer = function (done) {

    // Make sure this feature is activated before running
    if (!settings.reload) return done();

    // Initialize BrowserSync
    browserSync.init({
        injectChanges: true,
    });

    // Signal completion
    done();

};

// Reload the browser when files change
var reloadBrowser = function (done) {
    if (!settings.reload) return done();
    browserSync.reload();
    done();
};

function buildStyles(done){    
    // Make sure this feature is activated before running
    if (!settings.styles) return done();

    return src(files.scssPath)
            .pipe(sourcemaps.init()) // initialize sourcemaps first
            .pipe(sass()) // compile SCSS to CSS
            .on("error", sass.logError)
            .pipe(postcss([ autoprefixer(), cssnano() ])) // PostCSS plugins
            .pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
            .pipe(dest(files.cssTmp)
    ); // put final CSS in dist folder
}

// JS task: concatenates and uglifies JS files to script.js
function buildScripts(done){
    // Make sure this feature is activated before running
    if (!settings.scripts) return done();

    return src([
            files.jsPath
            //,'!' + 'includes/js/jquery.min.js', // to exclude any specific files
            ])
            //.pipe(concat('all.js'))
            .pipe(uglify())
            .pipe(dest(files.jsTmp)
    );
}

// Remove pre-existing content from output folders
var cleanTmp = function (done) {

    // Make sure this feature is activated before running
    if (!settings.clean) return done();

    // Clean the dist folder
    del.sync([
        files.tmp
    ]);

    // Signal completion
    return done();
};

// Watch for changes
var watchSource = function (done) {
    watch([files.input, files.pageFiles], series(exports.default, reloadBrowser));
    done();
};

// Export the default Gulp task so it can be run
// Runs the scss and js tasks simultaneously
// then runs cacheBust, then watch task
exports.default = series(
    cleanTmp,
    parallel(
        buildStyles, 
        buildScripts
        )
);

// Watch and reload
// gulp watch
exports.watch = series(
    exports.default,
    startServer,
    watchSource
);