使用 Gulp.js 和 globbing 模式就地修改文件（相同的目标）

Question

我有一个 gulp 任务，它试图将 .scss 文件转换为 .css 文件（使用 gulp-ruby-sass），然后将生成的 .css 文件放到它找到原始文件的相同位置。问题是，由于我使用的是通配模式，我不一定知道原始文件的存储位置。

在下面的代码中，我尝试使用 gulp-tap 进入流并找出读取流的当前文件的文件路径：

gulp.task('convertSass', function() {
    var fileLocation = "";
    gulp.src("sass/**/*.scss")
        .pipe(sass())
        .pipe(tap(function(file,t){
            fileLocation = path.dirname(file.path);
            console.log(fileLocation);
        }))
        .pipe(gulp.dest(fileLocation));
});

根据console.log(fileLocation) 的输出，这段代码看起来应该可以正常工作。但是，生成的 CSS 文件似乎比我预期的要高一个目录。它应该是project/sass/partials，结果文件路径只是project/partials。

如果有更简单的方法可以做到这一点，我肯定会更加感激这个解决方案。谢谢！

Answer 1

如果要将所有文件保存在 dist 文件夹中自己的路径中

const media = () => {
    return gulp.src('./src/assets/media/**/*')
        .pipe(gulp.dest(file => file.base.replace('src', 'dist'))
    )
}

const watch = () => {
  gulp.watch(
    "./src/**/*",
    media
  );
};

Answer 2

这很有帮助！

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

    //sass
    gulp.watch([srcPath + '.scss', '!'+ srcPath +'min.scss']).on("change", function(file) {
         console.log("Compiling SASS File: " + file.path)
         return gulp.src(file.path, { base: "./" })
        .pipe(sass({style: 'compressed'}))
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.init())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write('./'))         
        .pipe(gulp.dest(".")); 
    });

    //scripts
    gulp.watch([srcPath + '.js','!'+ srcPath + 'min.js']).on("change", function(file) {
        console.log("Compiling JS File: " + file.path)
        gulp.src(file.path, { base: "./" })
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))       
        .pipe(gulp.dest(".")); 
    });
})

Answer 3

正如你所怀疑的那样，你把这件事弄得太复杂了。目的地不需要是动态的，因为全局路径也用于dest。只需通过管道连接到您从中获取 src 的同一基本目录，在本例中为“sass”：

gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest("sass"));

如果您的文件没有共同的基础并且您需要传递一个路径数组，那么这已经不够了。在这种情况下，您需要指定基本选项。

var paths = [
  "sass/**/*.scss", 
  "vendor/sass/**/*.scss"
];
gulp.src(paths, {base: "./"})
  .pipe(sass())
  .pipe(gulp.dest("./"));

Answer 4

gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest(function(file) {
    return file.base;
  }));

这里给出的最初答案是：https://stackoverflow.com/a/29817916/3834540。

我知道这个帖子很旧，但它仍然显示为 google 上的第一个结果，所以我想我不妨在这里发布链接。

Answer 5

这比 numbers1311407 所引导的要简单。您根本不需要指定目标文件夹，只需使用.。另外，请务必设置基本目录。

gulp.src("sass/**/*.scss", { base: "./" })
    .pipe(sass())
    .pipe(gulp.dest("."));