我花了几个小时在这上面,但无法真正理解这里发生了什么。我尝试为我的 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
最佳答案
我最终像这样使用它
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("."));
关于node.js - Gulp 源映射与 css minify,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42189942/