Run one gulp task on multiple folders. The folders

问题:

I create a lot of WordPress plugins, each of these all follow the same folder structure and all use Gulp to handle their SASS / JS assets.

Folder Structure is as follows:

|-- .gulpfile.js

|-- lsmwp-one
    |-- plugin.php
    |-- assets
        |-- src
            |-- style.scss
        |-- dist

|-- lsmwp-two
    |-- plugin.php
    |-- assets
        |-- src
            |-- style.scss
        |-- dist

I would like to have a single Gulpfile that watches each 'lsmwp-*' folder, runs all related tasks and outputs to plugin dist folder.

My Gulpfile currently watches these folders but I am having trouble setting the dest location. Any help would be appreciated.

var pluginSrc = 'wp-content/plugins/lsmwp-*/assets/src/style.scss';

gulp.task('lsmwp-plugins', () => {
    gulp.src( pluginSrc )
    .pipe(sass())
    .pipe(concat('style.min.css'))
    .pipe(autoprefixer())
    .pipe(cssmin())
    .pipe(gulp.dest(); // Stuck here...
});

回答1:

It looks like you have two issues. One, running the task separately for each plugin folder. Two, setting the destination relative to each plugin folder.

const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
const glob = require('glob');

// this gets an array of matching folders
const wpPluginFolders = glob.sync('lsmwp-*');

// for my testing I simplified the folder structure above, you would use
// const wpPluginFolders = glob.sync('wp-content/plugins/lsmwp-*');

const pluginSrc = '/assets/src/style.scss';

gulp.task('default', () => {

  let stream;

  // work on each folder separately
  wpPluginFolders.forEach(function (pluginFolder) {

    stream = gulp.src( pluginFolder + pluginSrc )
      .pipe(sass())
      .pipe(concat('style.min.css'))
      .pipe(autoprefixer())
      .pipe(cssmin())
      .pipe(gulp.dest( pluginFolder + '/assets/dist' ));
  });
  return stream;
});