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

IT技术 javascript node.js sass gulp
2021-03-14 11:05:53

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

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

5个回答

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

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

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

var paths = [
  "sass/**/*.scss", 
  "vendor/sass/**/*.scss"
];
gulp.src(paths, {base: "./"})
  .pipe(sass())
  .pipe(gulp.dest("./"));
@niftygrifty 根据文档，它应该在正常情况下工作。在这种情况下，文件将根据计算出的相对基数写入其匹配的全局路径sass。也许这里的 sass 插件已经在修改路径了？
2021-04-27 11:05:53
啊，厉害。谢谢你。是否还有一种简单的方法可以将 glob 用于源，但只需将所有内容直接放在sass文件夹中？
2021-05-10 11:05:53
但这不是将文件保存在 /sass 中，而不是保存在 /sass/any/where 之类的相应子目录中吗？如何将文件保存在全局路径中？
2021-05-11 11:05:53
这对我不起作用。我不得不做gulp.src("dist/**/*")...gulp.dest("./")
2021-05-12 11:05:53
@Dan-Nolan 扁平化文件夹结构的一种方法似乎是使用gulp-rename，请参阅此问题
2021-05-13 11:05:53

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

gulp.src("sass/**/*.scss", { base: "./" })
    .pipe(sass())
    .pipe(gulp.dest("."));
这是正确的答案。如果您试图保留目标结构（即，不展平结构），则必须在 gulp.src 中指明基本目录。
2021-05-09 11:05:53
还值得注意的是，OP 的情况可能并不常见，至少对于 CSS 处理而言，因为通常您希望导出到css目录或类似目录，而不是 from sassto sass。在这种情况下，接受的答案实际上比这个替代方案更简单。
2021-05-10 11:05:53
@GuiAmbros 所说的不是真的，至少不是根据文档。默认情况下，基数计算为通配路径之前的所有内容。在我的回答中，基数将计算为./sass，但问题指定输出保留sassdir，这就是为什么它在dest. 这个答案使用 base 选项实现了相同的结果，但两种方法都没有错。
2021-05-12 11:05:53
当我尝试此操作时，文件保存在“/”中，而不是在全局路径下。
2021-05-14 11:05:53 
gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest(function(file) {
    return file.base;
  }));

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

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

这个线程是旧的，但答案仍然是正确的，尽管我认为这种方法有点干燥（如果效率稍低）。链接的问题实际上是使用dest不正确的问题。当然给定的解决方案有效，但第一次做对，只需替换dest('./')为dest('./images')，就会达到相同的结果。
2021-04-23 11:05:53
说得通。在您的情况下，问题是 gulp 没有计算的通用基础。您的解决方案有效，但@NightOwl888 给出的指定基数的解决方案也有效。更新接受的答案以包括没有共同基础的情况。
2021-05-04 11:05:53
另一个解决方案对我不起作用的原因是我在 gulp.src() 中有一个数组，例如 gulp.src(['sass/**', 'common/sass/**']) 并且当我搜索时答案，这是我找到的帖子。应该应该说得更清楚不过
2021-05-05 11:05:53
这应该是公认的答案！不是其他的，它们仅特定于一个文件或基本路径。
2021-05-09 11:05:53

这非常有帮助！

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

如果您想将所有文件保存在 dist 文件夹中各自的路径中

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

const watch = () => {
  gulp.watch(
    "./src/**/*",
    media
  );
};
其它你可能感兴趣的问题
上一篇如何检测用户是否已登录 Firebase？ 下一篇Socket.io 客户端：使用一个处理程序响应所有事件？