Gulp sourcemaps with css minify

Question

我花了好幾個小時，無法真正理解這里發生了什么。 我嘗試concat ， minify和創造sourcemaps我的css文件。 我希望我的文件夾結構是這樣的：

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