如何修改gulp stream中的css并保存正确的源地图?
需要更改gulp stream中的css代码(添加到图像路径?哈希),但不会破坏文件中的源映射。当前无法处理css文件,但sourcemaps已扭曲(未存储以前的原始贴图)。我知道我需要一个插件用于这个乙烯基sourcemaps应用和返工+返工url如何修改gulp stream中的css并保存正确的源地图?,gulp,source-maps,Gulp,Source Maps,需要更改gulp stream中的css代码(添加到图像路径?哈希),但不会破坏文件中的源映射。当前无法处理css文件,但sourcemaps已扭曲(未存储以前的原始贴图)。我知道我需要一个插件用于这个乙烯基sourcemaps应用和返工+返工url gulp.src('./source/css/**/*.css') .pipe(sourcemaps.init({loadMaps: true})) .pipe(concat('main.css')) .pipe(autop
gulp.src('./source/css/**/*.css')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(concat('main.css'))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(antiCache(fileHashes))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css/'));
其中filHashes
是json对象“path/to/image.png”:“a9ecbba8ef”
。函数antiCache
只需更改URL即可
function antiCache(fileHashes) {
return through.obj(function (file, encoding, callback) {
var content = file.contents.toString(),
options = {};
if (file.sourceMap) {
options.outSourceMap = file.relative;
}
var mangled = (function() {
var m = rework(file.contents.toString()).use(reworkUrl(function (url) {
if (fileHashes.hasOwnProperty(path.basename(url))) {
return url + '?' + fileHashes[path.basename(url)];
}
return url;
}));
m = css.stringify(m.obj, { sourcemap: true });
m.code = new Buffer(m.code));
return m;
})();
file.contents = mangled.code;
if (file.sourceMap) {
var map = mangled.map;
map.file = path.relative(file.base, file.path);
applySourceMap(file, map);
}
this.push(file);
callback(null, file);
});
}
请帮忙