Gulp - 在结合媒体查询时减少源映射

Question

在这个项目中，我利用“Gulp”来完成一些任务，但最近收到了添加源映射的请求..

我的 sourcemap 工作正常，但它似乎与 'gulp-combine-mq' 和 "gulp-combine-media-queries" 等其他插件有冲突 aka "cmq"

在注释掉“cmq”的情况下运行我的样式任务时，我的源图完全符合我的预期

gulp.task('styles', function () {
  gulp.src('./assets/src/less/main.less')
    .pipe(sourcemaps.init())
    .pipe(less().on('error', gutil.log))
    //.pipe(cmqs().on('error', gutil.log))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./assets/css'));
});

当我尝试使用“cmq”时，它会弄乱映射

还有其他人在使用 gulp、less、combine-media-queries 或 combine-mq 时遇到过这个问题吗？

有人对如何解决这个问题有建议吗？

• 提前致谢

Answer 1

您应该考虑将gulp-minify-css 用于您的缩小任务（如果您还没有这样做的话），因为 gulp-minify-css 通过它的选项直接传递给clean-css。

clean-css 现在确实支持媒体查询合并，请参阅：https://github.com/jakubpawlowicz/clean-css/commit/6ed784a4aae91e5d7f48cf189c24095dfb8062cd