Gulp - 在组合媒体查询时减少Sourcemapping

Question

在这个项目中，我正在利用“Gulp”执行某些任务，但最近收到了添加sourcemapping的请求。

我有源图工作，但它似乎与其他插件有冲突，如'gulp-combine-mq'和"gulp-combine-media-queries" 又名“cmq” < / p>

当运行我的样式任务时，“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