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

2023-12-06

我是 gulpfile 的新手,我不知道如何使用单个任务迭代多个文件夹

我的 src 文件夹结构

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

进入 dist 文件夹我想要这样的东西(没有“资产”文件夹)

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+'/));
})

尝试这个:

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

吞咽压扁

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Gulp - 按文件夹编译sass,并修改父目录 的相关文章