Gulp 4 - Multifile tasks w/ external config. Basic gulpfile template for use with multiple task files, using gulp-load-plugins

browsersync.js

// =========================================================
// Gulp Task: browsersync
// NOTE: Using gulp v4
// Description:  Sync sass, typescript, html, and browser
// using external config or add modify src
// npm install --save-dev browser-sync gulp-typescript gulpjs/gulp.git#4.0 gulp-load-plugins
// Options: node-sass gulp-sass || gulp-ruby-sass
// =========================================================
var config              = require('../config.js');
var browserSync         = require('browser-sync').create();

module.exports = function(gulp, plugins) {
    return function () {
    var stream = 
// -------------------------------------------- Start Task
    browserSync.init(config.browsersync.opts);

    browserSync.watch(config.sass.src, gulp.series('sass'));
    browserSync.watch(config.typescript.src, gulp.series('ts'));
    browserSync.watch(config.browsersync.watch).on('change', browserSync.reload);
// ---------------------------------------------- End Task
    return stream;
    };
};

clean.js

// =========================================================
// Gulp Task: clean
// Description: deletes dist folder
// npm install --save-del del gulp-load-plugins
// =========================================================
var config              = require('../config.js'),
    del                 = require('del');

module.exports = function(gulp, plugins) {
    return function (cb) {
    var stream = 
// -------------------------------------------- Start Task
        // del(config.clean.folders, cb);
        del('./dist/', cb);
// ---------------------------------------------- End Task
    return stream;
    };
};

config.js

// =========================================================
// Project: PROJECT-NAME
// =========================================================
// ------------------------------------------ Export Configs
module.exports = {
    production: false, // use to programmatically operate on 
    // gulp tasks based on environment
// -------------------------------------------- autoprefixer
    autoprefixer: {
        opts: {
            browsers: ['last 3 versions']
        }
    },
// --------------------------------------------- browsersync
    browsersync: {
        opts: {
            server: './src/'
        },
        watch: [
            './src/assets/styles/css/**/*.css',
            './src/assets/scripts/js/**/*.js',
            './src/**/*.html'
        ]
    },
// --------------------------------------------------- clean
    clean: {
        folders: [
            './dist/'
        ]  
    },
    html: {
        src: ['./src/**/*.html', '!src/assets/bin/**/*'],
        htmlmin: { // In case more html file operations are needed.
            opts: {
                // https://github.com/kangax/html-minifier
                collapseWhitespace: true,
                removeComments: true
            }
        },
        dest: './dist/'
    },
// ------------------------------------------------ new-task
    newtask: {
        src: [
            "./gulp/utils/newTaskTemplate.js"
        ],
        outputName: "TASK-TEMPLATE.js",
        dest: "./gulp/tasks/"
    },
// -------------------------------------------------- rename
    rename: {
        min: { suffix: '.min' }
    },
// ---------------------------------------------------- sass
    sass: {
        src: [
            "./src/assets/styles/sass/**/*.{scss,sass}"
        ],
        opts: { }, // add sass options here
        outputName: 'main.css',
        dest: './src/assets/styles/css/'
    },
// ------------------------------------------------- scripts
    scripts: {
		src: [
            './src/assets/scripts/js/**/*.js',
    ],
		dest: './dist/assets/js'
	},
// -------------------------------------------------- styles
    styles: {
        src: [
            './src/assets/styles/css/**/*.css',
        ],
        dest: './dist/assets/css'
    },
// ---------------------------------------------- typescript
    typescript: {
        src: [
            './src/assets/scripts/ts/**/*.ts'
        ],
        dest: './src/assets/scripts/js',
        opts: {
            noImplicitAny: true
        }
    },
// ------------------------------------------------- vendors
    vendors: {
        js: {
            src: [
                './bower_components/bootstrap/dist/js/bootstrap.min.js',
                './bower_components/jquery/dist/jquery.min.js',
                './src/assets/bin/bootstrap-4.0.0-alpha/dist/js/bootstrap.min.js'
            ],
            dest: './dist/assets/js/vendors'
        },
        css: {
            src: [
                './bower_components/font-awesome/css/font-awesome.min.css',
                './bower_components/font-awesome/css/font-awesome.css.map',
                './bower_components/bootstrap/dist/css/bootstrap.min.css',
                './bower_components/bootstrap/dist/css/bootstrap.min.css.map'
            ],
            dest: './dist/assets/css/vendors'
        },
        sass: {
            // NOTE: This is to perform operations on the sass files
            src: [
                './bower_components/font-awesome/scss/**/*.scss', // ex
                './src/assets/bin/bootstrap-4.0.0-alpha/scss/**/*.scss' // ex
            ],
            opts: { },
            dest: './dist/assets/css/vendors'
        },
        less: {
            src: [
                './bower_components/bootstrap/less/**/*.less'
            ],
            opts: { },
            dest: './dist/assets/css/vendors'
        },
        fonts: {
            src: [
             './bower_components/bootstrap/fonts/**/*.*',
             './bower_components/font-awesome/fonts/**/*.*'
            ],
            dest: './dist/assets/fonts'
        }
    }
}

gulpfile.js

// =========================================================
// Project: PROJECT-NAME
// NOTE: Using Gulp 4
// npm install --save-dev gulp-load-plugins gulpjs/gulp.git#4.0
// =========================================================
var gulp 		= require('gulp'),
	config		= require('./gulp/config'),
	plugins		= require('gulp-load-plugins')();

// ---------------------------------- Gulp Terminal Commands
// ---- gulp
// ---- gulp build
// ---- gulp new-task

// --------------------function to get tasks from gulp/tasks
function getTask(task) {
	return require('./gulp/tasks/' + task)(gulp, plugins);
}

// ---------------------------------------------- Gulp Tasks
gulp.task('sass',       getTask('sass'));
gulp.task('scripts',    getTask('scripts'));
gulp.task('styles',     getTask('styles'));
gulp.task('ts',         getTask('typescript'));
gulp.task('new-task',   getTask('new-task'));
gulp.task('sync',       getTask('browsersync'));
gulp.task('clean',      getTask('clean'));
gulp.task('moveDist',   getTask('move-dist'));
gulp.task('vendors',    getTask('vendors'));
gulp.task('html',       getTask('html'));

// --------------------------------------- Default Gulp Task
gulp.task('default', gulp.series(
	gulp.parallel('sass', 'ts'), 'sync')
);

// ---------------------------------------------- gulp build
// vendors - task which moves and operates on node_modules
// and bower_components dependencies
// moveDist: moves dist folder to another location
// on the file system (useful for multiple repos e.g. gh-pages)
gulp.task('build', gulp.series('clean',
	gulp.parallel('scripts', 'styles', 'html'), 'vendors', 'moveDist')
);


// =========================================================
// Basic example of gulp multifile tasks folder structure
// =========================================================
// **** Project-Directory/
// ------ gulpfile.js
// ****** src/
// ****** dist/
// ****** gulp/
// -------- config.js
// ******** tasks/
// ******** utils/
// ----------- newTaskTemplate.js

html.js

// =========================================================
// Gulp Task: html
// Description: minify html
// Dependencies: npm install --save-dev gulp-htmlmin
// =========================================================
var config              = require('../config.js');

module.exports = function(gulp, plugins) {
    return function () {
    var stream = 
// -------------------------------------------- Start Task
    gulp.src(config.html.src)
        .pipe(plugins.htmlmin(config.html.htmlmin.opts))
        .pipe(gulp.dest(config.html.dest));
// ---------------------------------------------- End Task
    return stream;
    };
};

move-dist.js

// =========================================================
// Gulp Task: moveDist
// Description: move dist folder to external folder. Useful
// for multirepo projects. e.g. a gh-pages-site.
// npm install --save-dev gulp-load-plugins
// =========================================================
var config              = require('../config.js');

module.exports = function(gulp, plugins) {
    return function () {
    var stream = 
// -------------------------------------------- Start Task
    gulp.src('./dist/**/*.*')
        .pipe(gulp.dest('./../gh-pages-site'));
// ---------------------------------------------- End Task
    return stream;
    };
};

new-task.js

// =========================================================
// Gulp Task: newTask
// Description: creates a new multifile task template
// Dependencies: npm install gulp-rename gulp-load-plugins
// =========================================================
var config              = require('../config.js');

module.exports = function(gulp, plugins) {
    return function() {
    var stream = 
// -------------------------------------------- Start Task
    gulp.src(config.newtask.src)
    .pipe(plugins.rename(config.newtask.outputName))
    .pipe(gulp.dest(config.newtask.dest));
// ---------------------------------------------- End Task
    return stream;
    };
};

newTaskTemplate.js

// =========================================================
// Gulp Task: 
// Description: 
// Dependencies: npm install 
// =========================================================
var config              = require('../config.js');

module.exports = function(gulp, plugins) {
    return function () {
    var stream = 
// -------------------------------------------- Start Task
    gulp.src('')
// ---------------------------------------------- End Task
    return stream;
    };
};

sass.js

// =========================================================
// Gulp Task: sass
// Description: transpiles sass, adds sourcemaps, prefixes
// npm install --save-dev node-sass gulp-sass gulp-sourcemaps gulp-autoprefixer gulp-load-plugins
// =========================================================
var config              = require('../config.js');

module.exports = function(gulp, plugins) {
    return function () {
    var stream = 
// -------------------------------------------- Start Task
    gulp.src(config.sass.src)
    .pipe(plugins.sourcemaps.init())
    .pipe(plugins.sass().on('error', plugins.sass.logError))
    .pipe(plugins.autoprefixer(config.autoprefixer.opts))
    .pipe(plugins.sourcemaps.write('.'))
    .pipe(gulp.dest(config.sass.dest))
// ---------------------------------------------- End Task
    return stream;
    };
};

scripts.js

// =========================================================
// Gulp Task: scripts
// Description: uglify all js, add sourcemaps, rename
// npm install --save-dev gulp-uglify gulp-rename gulp-sourcemaps merge-stream gulp-load-plugins
// =========================================================
var config              = require('../config.js'),
    merge               = require('merge-stream');

module.exports = function(gulp, plugins) {
    return function () {       
// -------------------------------------------------- src js
    var stream = 
    gulp.src(config.scripts.src)
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.uglify())
        .pipe(plugins.rename(config.rename.min))
        .pipe(plugins.sourcemaps.write('.'))
        .pipe(gulp.dest(config.dist.scripts.js));
// ------------------------------------------------ End Task
    return stream;
    };
};

styles.js

// =========================================================
// Gulp Task: styles
// Description: minify all css, add sourcemaps, rename
// Dependencies: npm install --save-dev gulp-minify-css gulp-rename gulp-sourcemaps gulp-load-plugins
// =========================================================
var config              = require('../config.js');

module.exports = function(gulp, plugins) {
    return function () {
    var stream = 
// -------------------------------------------- Start Task
    gulp.src(config.styles.src)
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.minifyCss())
        .pipe(plugins.rename(config.rename.min))
        .pipe(plugins.sourcemaps.write('.'))
        .pipe(gulp.dest(config.dist.styles.css));
// ---------------------------------------------- End Task
    return stream;
    };
};

typescript.js

// =========================================================
// Gulp Task: typescript
// Description: Transpile .ts files and add sourcemaps
// npm install --save-dev gulp-typescript gulp-sourcemaps gulp-load-plugins
// =========================================================
var config              = require('../config.js');

module.exports = function(gulp, plugins) {
    return function () {
    var stream = 
// -------------------------------------------- Start Task
    gulp.src(config.typescript.src)
    .pipe(plugins.sourcemaps.init())
    .pipe(plugins.typescript(config.typescript.opts));

// ---------------------------------------------- End Task
    return stream.js.pipe(plugins.sourcemaps.write('.')).pipe(gulp.dest(config.typescript.dest));
    };
};

vendors.js

// =========================================================
// Gulp Task: vendors
// Description: move all node and bower dependencies to dist
// easily add sass, less, etc. Operate on each as needed.
// basic configuration supplied
// npm install --save-dev merge-stream gulp-newer
// gulp-load-plugins
// =========================================================
var config              = require('../config.js'),
    merge               = require('merge-stream');

module.exports = function(gulp, plugins) {
    return function () {
// ---------------------------------------------- Start Task
// ---- move js files
    var js = 
    gulp.src(config.vendors.js.src)
        .pipe(plugins.newer(config.vendors.js.dest))
        .pipe(gulp.dest(config.vendors.js.dest));

// ---- move css files
    var css =
    gulp.src(config.vendors.css.src)
        .pipe(plugins.newer(config.vendors.css.dest))
        .pipe(gulp.dest(config.vendors.css.dest));

// ---- move font files
    var fonts =
    gulp.src(config.vendors.fonts.src)
        .pipe(plugins.newer(config.vendors.fonts.dest))
        .pipe(gulp.dest(config.vendors.fonts.dest));
        
// ---- sass
    // var sass =
    // gulp.src(config.vendors.sass.src)
    //     .pipe(plugins.newer(config.vendors.sass.dest))
    //     .pipe(gulp.dest(config.vendors.sass.dest));

// ---- less
    // var sass =
    // gulp.src(config.vendors.less.src)
    //     .pipe(plugins.newer(config.vendors.less.dest))
    //     .pipe(gulp.dest(config.vendors.less.dest));

// ------------------------------------------------ End Task
    return merge( js, css, fonts ); // add sass and/or less
    };
};

thks for all this great work

muy buen trabajo gracias por su gran aporte !
in "styles.js"
.pipe(gulp.dest(config.dist.styles.css)); line 17 "styles.js" not found in my proyect, yo lo reemplace por ".pipe(gulp.dest(config.styles.dest)); y ahora si me funciona perfecto.... Thanks !!

Great inspiration on setting up managable and scalable gulp workflows. Thanx!

Is there a way to make some of the tasks private, eg not exporting them?

In your gulpfile.js you are using task() but according to: https://gulpjs.com/docs/en/api/task, it mentions its not a recommended pattern. Is there a way to split files without using task()? Thank you.

Yes. There is a way. Read this https://gulpjs.com/docs/en/getting-started/creating-tasks