Last active
November 10, 2023 23:58
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ========================================================= | |
// 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; | |
}; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ========================================================= | |
// 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; | |
}; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ========================================================= | |
// 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' | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ========================================================= | |
// 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ========================================================= | |
// 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; | |
}; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ========================================================= | |
// 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; | |
}; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ========================================================= | |
// 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; | |
}; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ========================================================= | |
// 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; | |
}; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ========================================================= | |
// 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; | |
}; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ========================================================= | |
// 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; | |
}; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ========================================================= | |
// 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; | |
}; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ========================================================= | |
// 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)); | |
}; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ========================================================= | |
// 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 | |
}; | |
}; |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thks for all this great work