Skip to content

Instantly share code, notes, and snippets.

@tristanisfeld
Last active November 10, 2023 23:58
Show Gist options
  • Save tristanisfeld/9deea503260324f5e9b0 to your computer and use it in GitHub Desktop.
Save tristanisfeld/9deea503260324f5e9b0 to your computer and use it in GitHub Desktop.
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
Copy link

thks for all this great work

@sergiodevelops
Copy link

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
Copy link

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
Copy link

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.

@abarretov
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment