Question

我是Gulp编程的新手。

我需要定义一个“动态” scss任务，该任务可以在多个目标目录中编译多个源目录

src / main / scss /
- app.scss（全局资源）
- 模块/（模块资源）
  - 管理员/
    - *。scss
  - ftt /
    - *。scss

以上是源文件的目录布局。我有兴趣将模块目录下的每组scss文件（我可能事先不知道）编译到包含模块本身的目录树中

src/main/scss/modules/admin/*.scss ==> webapp/secure/admin/common/common.css
src/main/scss/modules/ftt/*.scss==> webapp/secure/ftt/common/common.css

我可以编写一个捕获src/main/scss/modules/*/*.scss的glob，但是如何重用代表目录的星号？如果我正在运行正则表达式，我将捕获并使用编号为$ 1的组

Answer 1

我建议您查看glob.sync。在此处搜索[gulp] glob.sync user:836330。那是我。我已经在这里回答了一些与您类似的问题。尤其参见running a gulp task on separate folders。它在不同的文件夹上运行相同的gulp任务，然后使用文件夹名称设置唯一的目的地。

glob.sync非常适合这样的事情。

伪代码如下（未经测试）：

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

捕获并重用全局

1 个答案: