Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gulp 4 - Multifile tasks w/ external config. Basic gulpfile template for use with multiple task files, using gulp-load-plugins
// =========================================================
// 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;
};
};
// =========================================================
// 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;
};
};
// =========================================================
// 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'
}
}
}
// =========================================================
// 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
// =========================================================
// 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;
};
};
// =========================================================
// 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;
};
};
// =========================================================
// 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;
};
};
// =========================================================
// 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;
};
};
// =========================================================
// 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;
};
};
// =========================================================
// 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;
};
};
// =========================================================
// 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;
};
};
// =========================================================
// 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));
};
};
// =========================================================
// 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
};
};
@YannLorgueilleux

This comment has been minimized.

Copy link

@YannLorgueilleux YannLorgueilleux commented Oct 31, 2018

thks for all this great work

@sergioarieljuarez

This comment has been minimized.

Copy link

@sergioarieljuarez sergioarieljuarez commented Mar 18, 2019

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 !!

@joldnl

This comment has been minimized.

Copy link

@joldnl joldnl commented Oct 30, 2019

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?

@codeengie

This comment has been minimized.

Copy link

@codeengie codeengie commented Jul 28, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.