Search code examples
gulplessmedia-queries

Gulp - Sourcemapping less while combining media queries

In this project I am leveraging "Gulp" for some tasks, but recently got a request to add sourcemapping..

I have the sourcemap working, but it seems to have a conflict with other plugins like 'gulp-combine-mq' and "gulp-combine-media-queries" aka "cmq"

When running my styles task with "cmq" commented out, i get my sourcemap exactly how i expect it

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'));
});

enter image description here

When I try to use "cmq", it messes up the mapping

enter image description here

Has anyone else had this issue using gulp, less, combine-media-queries or combine-mq?

Does anyone have suggestions on how to address this issue?

  • thanks in advance
Solution

  • You should consider to use gulp-minify-css for your minify task (if you not already do) because of gulp-minify-css passes its options are directly passed to clean-css.

    clean-css does support media query merging now, see: https://github.com/jakubpawlowicz/clean-css/commit/6ed784a4aae91e5d7f48cf189c24095dfb8062cd