使用Gulp.js和通配模式在适当位置修改文件（相同目标）

99

我有一个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。

如果这样做的方法要简单得多，那么我肯定会更喜欢该解决方案。谢谢！

— 丹·诺兰
source

155

正如您所怀疑的，您正在使它变得太复杂。目的地不需要是动态的，因为全局路径也用于目的地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("./"));

— 编号1311407
source

太好了谢谢。还有没有一种简单的方法可以将glob用作源，而只是将所有内容直接放在sass文件夹中？

— Dan-Nolan 2014年

2

这对我不起作用。我不得不做gulp.src("dist/**/*")……gulp.dest("./")

— niftygrifty 2015年

@ Dan-Nolan展平文件夹结构的一种方法看起来是使用

— gulp

@niftygrifty根据文档，它应该在正常情况下工作。在这种情况下，文件将根据计算出的相对基数写入其匹配的全局路径sass。也许这里的sass插件已经在修改路径了？

— Numbers1311407

1

但这不是将文件保存在/ sass中，还是不在/ sass / any / where之类的相应子目录中吗？如何使文件保存在全局路径中？

— 2015年

68

这比数字1311407导致的要简单。您根本不需要指定目标文件夹，只需使用即可.。另外，请确保设置基本目录。

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

— 夜猫子888
source

8

这是正确的答案。如果要保留目标结构（即不展平结构），则必须在gulp.src中指示基本目录。

— Gui Ambros 2015年

2

当我尝试此操作时，文件保存在“ /”中，而不是在全局路径下。

— 2015年

1

@GuiAmbros所说的话是不正确的，至少根据docs来说不是这样。默认情况下，基数计算为球形路径之前的所有值。在我的答案中，基数将被计算为./sass，但是问题指定输出保留了sassdir，这就是为什么在dest。中重复的原因。使用base选项，此答案可获得相同的结果，但两种方法都不对。

— number1311407

同样值得注意的是，OP的情况可能不那么常见，至少对于CSS处理而言，因为通常您希望导出到css目录或类似目录中，而不是从sassto中导出sass。在这种情况下，可接受的答案实际上比这种选择更简单。

— number1311407

30

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

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

我知道这个线程很旧，但它仍然显示为google上的第一个结果，所以我认为我也可以在此发布链接。

— Bobbarebygg
source

这个线程很旧，但是答案仍然是正确的，尽管我认为这个方法稍微有点DRYer（如果稍微不太有效）。链接的问题确实是使用dest不正确的问题。确保给定的解决方案能够正常工作，但只要将其替换dest('./')为dest('./images')，那么第一次正确执行就可以达到相同的结果。

— number1311407

其他解决方案对我不起作用的原因是，我在gulp.src（）中有一个数组，例如gulp.src（['sass / **'，'common / sass / **']），当我搜索时答案是我找到的帖子。不过，可能应该更清楚了

— bobbarebygg

说得通。在您的情况下，问题是gulp没有通用的计算基础。您的解决方案可以工作，但是@ NightOwl888提供的指定基础的解决方案也可以工作。更新接受的答案以包括没有共同基础的情况。

— number1311407

这应该是公认的答案！并非仅针对一个文件或基本路径的其他文件。

— MrCroft

0

这非常有帮助！

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

— 姆富法
source