node.js - Gulp 源映射与 css minify

Question

我花了几个小时在这上面，但无法真正理解这里发生了什么。我尝试为我的 css 文件concat、minify 并创建sourcemaps。我希望我的文件夹结构如下:

- Assets
----bundles
--------css
----css
----maps
--------css

我使用了以下代码的许多变体，但无法使其工作。例如，当我使用以下代码时:

gulp.src("./Assets/css/*.css", { base: "." })
        .pipe(sourcemaps.init())
        .pipe(concat("./Assets/bundles/css/"))
        .pipe(cssmin())
        .pipe(gulp.dest("."))
        .pipe(sourcemaps.write("./Assets/bundles/maps"))
        .pipe(gulp.dest("."));

这将创建一个文件夹结构:

./Assets/bundles/maps/Assets/bundles/css/myFile.css.map

但是，当我使用

gulp.src("./Assets/css/*.css", { base: "." })
        .pipe(sourcemaps.init())
        .pipe(concat("./Assets/bundles/css/"))
        .pipe(cssmin())
        .pipe(gulp.dest("."))
        .pipe(sourcemaps.write("./css"))
        .pipe(gulp.dest("."));

这会输出到我的根项目文件夹，例如

./css/Assets/bundles/css/myFile.css.map

这是怎么回事？我尝试使用 gulp-rename 但也无法使其工作。

注意:Gulp 版本为 3.9.1

Answer 1

我最终像这样使用它

gulp.src("./Assets/css/*.css", { base: "." })
        .pipe(sourcemaps.init())
        .pipe(concat("./Assets/bundles/css/"))
        .pipe(cssmin())
        .pipe(gulp.dest("."))
        .pipe(sourcemaps.write("./Assets/bundles/maps/css", {
            sourceMappingURL: function (file) { //This is to reference the correct paths for our map file..
                return "../maps/css/" + path.basename(file.path) + ".map"; //require the path module..
            }
        }))
        .pipe(rename(function (path) {
            if (path.extname == ".map") { //Only change the paths of map files not the .min files
                path.dirname = "./Assets/bundles/maps/css";
            }
        }))
        .pipe(gulp.dest("."));