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

Question

我正在使用 Gulp 编译 scss、uglify 和 concat，当我尝试在一个特定的文件中输出时，它做得很成功。

但是我想要实现的是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);
});