I am new to Gulp programming.
I need to define a "dynamic" scss task that compiles multiple source directories in multiple destination directories
- src/main/scss/
- app.scss (global resource)
- modules/ (modules resources)
The above is the directory layout of the source files.
I am interested in compiling each set of scss files under modules directory (which I may not know in advance) into a directory tree that includes the module itself
src/main/scss/modules/admin/*.scss ==> webapp/secure/admin/common/common.css
src/main/scss/modules/ftt/*.scss==> webapp/secure/ftt/common/common.css
I can write a glob that captures src/main/scss/modules/*/*.scss
but how to reuse the star representing the directory? If I was running regex I'd capture and use numbered group $1
I would suggest looking at glob.sync. Do a search here for [gulp] glob.sync user:836330
. That's me. I have answered a few questions here similar to yours. See particularly running a gulp task on separate folders. It runs the same gulp task on different folders and then uses the folder names to set unique destinations.
glob.sync is great for something like this.
Pseudo code follows (not tested):
const moduleFolders = glob.sync('src/main/scss/modules');
// perhaps your app.scss is supposed to be bundled into each module's css?
// if so, just add a second source to the gulp.src below
const sassSrc = 'common.scss'; // or your main scss file that does the imports in each module
gulp.task('default', () => {
let stream;
// work on each folder separately
moduleFolders.forEach(function (module) {
stream = gulp.src( module + sassSrc )
.pipe(sass())
//.pipe(concat('style.min.css'))
//.pipe(autoprefixer())
//.pipe(cssmin())
.pipe(gulp.dest( "webapp/secure/" + module + '/common' ));
});
return stream;
});