Gulp - 按文件夹编译 sass，并修改父目录 [英] Gulp - compile sass by folder, and modify parent directories

问题描述

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

I'm new on gulpfile and i can't figure out how can I iterate through multiple folders using a single task

我的 src 文件夹结构

My src folder structure

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

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

Into dist folder i want something like this ( without 'assets' folder )

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

我有一些任务可以正常工作，但我希望它们是一个单独的任务

I have a few tasks that work properly but I want them to be a single task

我怎样才能做到这一点?

How can I achieve that?

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

gulp-flatten

这篇关于Gulp - 按文件夹编译 sass，并修改父目录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！