Правильным плагином для группировки @media без конфликтов с sourcemap в Gulp.js является gulp-group-css-media-queries.
Gulp.js -- это инструмент для автоматизации задач в веб-разработке. Он позволяет разработчикам создавать и выполнять различные задачи, такие как компиляция препроцессоров, сборка и минификация файлов, оптимизация изображений и др. Это достигается с помощью плагинов, которые добавляют функциональность в Gulp.js.
Один из популярных веб-разработчиковских задач - это группировка @media запросов. Это полезно для улучшения производительности и удобочитаемости кода CSS. Однако при использовании sourcemap, который помогает при отладке и отслеживании исходных файлов CSS, могут возникнуть проблемы с конфликтами.
Gulp-group-css-media-queries -- это плагин для Gulp.js, который позволяет разработчикам группировать @media запросы без конфликтов с sourcemap. Он отслеживает исходные файлы CSS, а затем создает новые файлы CSS с группированными @media запросами. При этом сохраняется ссылка на исходные файлы в sourcemap, что позволяет разработчикам легко отслеживать исходный код.
Чтобы использовать gulp-group-css-media-queries, вам сначала нужно установить его с помощью npm, команда для установки будет выглядеть так:
npm install gulp-group-css-media-queries --save-dev
Он может быть добавлен в ваш файл gulpfile.js следующим образом:
const gulp = require('gulp');
const gcmq = require('gulp-group-css-media-queries');
gulp.task('groupMediaQueries', function() {
return gulp.src('src/css/*.css')
.pipe(gcmq())
.pipe(gulp.dest('dist/css'));
});
gulp.task('default', gulp.series('groupMediaQueries'));
В приведенном выше примере, после установки плагина, мы импортируем модуль gulp и модуль gulp-group-css-media-queries. Затем мы создаем задачу 'groupMediaQueries', которая использует метод gulp.src для выбора исходных файлов CSS, затем пропускает их через плагин gcmq, который группирует @media запросы, и сохраняем результат в папке назначения 'dist/css'.
Наконец, мы создаем задачу "default", которая выполняет задачу 'groupMediaQueries' при запуске команды gulp в командной строке.
Теперь, когда вы запустите команду gulp, плагин gulp-group-css-media-queries будет группировать ваши @media запросы без конфликтов с sourcemap, что позволит вам легко поддерживать ваш код и улучшать производительность вашего сайта.