Gulp-在与SCSS文件相同的目录中生成输出CSS文件

Question

我正在使用Gulp编译scss，uglify和concat，当我尝试在一个特定的File中输出时，它已经成功完成。

但是我想实现的是，gulp应该在与SCSS文件相同的目录中输出css文件。

例如

src
|
app
  |
  Folder1
     |
     style1.scss
     style1.css
  Folder2
     |
     style2.scss
     style2.css

我现在正在做的是下面的gulp文件

var gulp = require("gulp");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var sass = require("gulp-sass");
var debug = require("gulp-debug");

gulp.task('css', function () {
    gulp.src(
        "/*.scss"
    ).pipe(concat('styles.css'))
        pipe(sass().on('error', sass.logError))
        .pipe(debug({ title: 'unicorn:' }))
        .pipe(gulp.dest("./src"));
})

gulp.task('minify', ['css', 'default']);
gulp.task('default', function () {
    console.log("Default Task");
})

此在src目录中生成的CSS文件。但是我需要不同的方法。

Answer 1

要在同一文件夹中生成输出文件，请在目的地位置提供相同位置例子

gulp.task('css', function () {
  var component =  gulp.src('pattern-lab/source/_patterns/*/*/*/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(cssimport())
    .pipe(autoprefixer())
    .pipe(gulp.dest('pattern-lab/source/_patterns'));
  return mergeStream(component);
});