Gulp

Question

我是 gulpfile 的新手，我不知道如何使用单个任务遍历多个文件夹

我的 src 文件夹结构

folder1
   assets
      style.scss
folder2
   assets
      style.scss
folder3
   subfolder1
      assets
         style.scss
   subfolder2
      assets
         style.scss

进入 dist 文件夹我想要这样的东西（没有 'assets' 文件夹）

folder1
   style.css
folder2
   style.css
folder3
   subfolder1
      style.css
   subfolder2
      style.css

我有一些任务可以正常工作，但我希望它们成为一个任务

我怎样才能做到这一点？

var pack1 = ['folder1', 'folder2'];
var pack2 = ['subfolder1', 'subfolder2'];

gulp.task('scss_pack1', function () {
  pack1.map(function (element) {
    return gulp.src('src/'+element+ '/assets/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('/dist/'+element+'/));
})

gulp.task('scss_pack2', function () {
  pack2.map(function (element) {
    return gulp.src('src/folder3/'+element+ '/assets/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('/dist/folder3/'+element+'/));
})

Answer 1

试试这个：

const gulp = require("gulp");
const sass = require("gulp-sass");
const flatten = require('gulp-flatten');


gulp.task('default', function () {

  return gulp.src("src/**/assets/style.scss")
    .pipe(sass())

      // flatten subPath(0, -1) will strip off the last folder, i.e., 'assets'
      // extracts the first element through the second-to-last element in the sequence.
      // so subfolder1/assets -> subfolder1  (the second-to-last element is subfolder1)
      // and assets/ -> nothing (since there is no second-to-last element!!)

    .pipe(flatten({ subPath: [0, -1] }))

    .pipe(gulp.dest("dist/"));
});

gulp-flatten

Gulp - 按文件夹编译sass，并修改父目录

Gulp - compile sass by folder, and modify parent directories

gulp-sass