Каким плагином кроме gulp-sourcemaps можно генерировать sourcemaps?

Question

[IIIu6ko]

gulp-sourcemaps не поддерживает плагин gulp-group-css-media-queries, а мне он необходим.
Подскажите чем можно генерировать sourcemaps для css?

Answer 1

[Егор Живагин]

Я не очень догоняю слово "поддерживает". А ты не пробовал group-css не пихать в sourcemap.init(), а прогнать до этого отдельно? По-идее, это должно работать.

Comments

[IIIu6ko]

Не работает, пробовал.

[IIIu6ko]

gulp.task('sass', function() { 
  return gulp.src('src/css/sass/**/*.{scss,sass}')
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sass().on("error", notify.onError()))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
    //.pipe(gulpGroup())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('src/css'))
    .pipe(browserSync.stream());
});

sourcemaps нужно инициализировать до компиляции sass, а gulpGroup работает уже с готовым css.
Даже если написать gulpGroup после sourcemaps.write() всё равно не работает нормально.

[IIIu6ko]

Я не очень догоняю слово "поддерживает".

All plugins between sourcemaps.init() and sourcemaps.write() need to have support for gulp-sourcemaps. You can find a list of such plugins in the wiki.

https://github.com/floridoo/gulp-sourcemaps/wiki/P...

Вот если не шарите в вопросе, зачем отвечаете?

[Егор Живагин]

Александр Шибков: да, я тоже прочитал доки. "between sourcemaps.init() and sourcemaps.write()". "Между." А после write - не должны. Вот и вставьте .pipe(gulpGroup()) после .pipe(sourcemaps.write())

[Егор Живагин]

Александр Шибков: в таком случает карта будет составлена до группировки. Я не готов сказать, будет ли это корректно работать, но больше вариантов нет.

[Роман Жаров]

Александр Шибков: Так и не нашли решение? Если есть поделитесь пожалуйста.

[Dmitry-W]

Роман Жаров, я заменил gulp-group-css-media-queries на css-mqpacker

return gulp.src(paths.sass.src)
    .pipe($.sourcemaps.init())
    .pipe($.sass().on('error', $.sass.logError))
    .pipe($.postcss([
      mqpacker(),
      stylefmt(),
      autoprefixer({
        flexbox: "no-2009"
      }),
    ]))
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest(paths.sass.dest));

[IIIu6ko]

Dmitry-W, У css-mqpacker есть траблы с сортировкой медиа-запросов. Он их сортирует по первому попавшему. То есть могут быть траблы, если у вас медиа-запросы не в одном файле.
Если он встретит в потоке первым запрос media (max-width: 575px), а потом только media (max-width: 1199px), то будет следующая картина:

@media (max-width: 575px) {
    ...
}

@media (max-width: 1199px) {
    ...
}

Что естественно повлияет на работоспособность.

Однако есть решение. У самого плагина есть опция "sort" https://github.com/hail2u/node-css-mqpacker#sort,
но она поддерживает только запросы с min-width, а max-width обрабатывает по старому.
После поисков альтернативы css-mqpacker'у случайно наткнулся на

Пользовательский метод сортировки (mobile-first / desktop-first) для css-mqpacker или pleeease (который использует css-mqpacker) или, возможно, для чего-то еще ))

https://github.com/dutchenkoOleg/sort-css-media-qu...

Собственно с помощью этого метода сортировки всё становится на свои места. Плюс автор русскоговорящий поэтому есть туториал на русском языке.

В итоге:

.pipe( postcss([
    mqpacker({
        sort: sortCSSmq
    }),
]))

[indeveloping]

mqpacker к сожалению устарел, поэтому разработчик ремондует использовать плагин для postcss: https://github.com/solversgroup/postcss-sort-media... Устанавливаем его через npm, и прописываем в таске стилей:

.pipe(postcss([require('postcss-sort-media-queries')({ sort: 'mobile-first' })]))

Надеюсь кому - нибудь поможет.

[IIIu6ko]

indeveloping, До сих пор использую эти два пакета:
mqpacker - https://github.com/hail2u/node-css-mqpacker
sortCSSmq - https://github.com/dutchenkoOleg/sort-css-media-queries

// Группируем медиазапросы.
.pipe(postcss([
  mqpacker({
    sort: sortCSSmq // Кастомный метод сортировки.
  })
]))

Всё работает, уже проверено временем.
В любом случаи спасибо за альтернативное решение.

[Егор Живагин]

IIIu6ko, устарел - не значит, что нельзя пользоваться, но поддержки/устранения багов/обновлений уже не будет. Условно, если обновиться postCss и что-то сломается, придётся искать другой пакет.
Да, это вроде и так понятно, но я всё таки решил написать)

[Roman Egliens]

У меня такая же проблема была, я оставил всё как есть, но единственное, я прописал условие, что если продакшен, то gcmq будет отрабатывать, а в режиме разработки, срабатывать не будет. По сути зачем мне компоновать медия запросы во время разработки?

[Вадим Сысоев]

IIIu6ko, А я пошел другим путем, я до сих пор так и пользуюсь gulp-group-css-media-queries и gulp-sourcemaps, единственное, я вынес пайп плагина gulp-group-css-media-queries в функцию билда, по сути на этапе разработки мне особо не нужно, чтоб медиавыражения объединялись, при этом и карты работают адекватно и правильно. А вот уже при билде она все объединяет и там карт нет))