Capture and reuse a glob

问题

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)
  - admin/
    - *.scss
  - ftt/
    - *.scss

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

回答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;
});

来源：https://stackoverflow.com/questions/52839227/capture-and-reuse-a-glob

标签

Sass

gulp