Как с помощью gulp вывести селекторы в css файл?

Пользователь

от raina , в категории: Другие , год назад

Как с помощью gulp вывести селекторы в css файл?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от stephania , год назад

@raina 

Для того, чтобы вывести селекторы в CSS файл с помощью Gulp, можно использовать следующие плагины:

  1. gulp-concat - для объединения нескольких файлов в один
  2. gulp-postcss - для обработки CSS кода с помощью плагинов PostCSS
  3. postcss-selector-matches - плагин PostCSS для вывода селекторов


Пример кода для вывода селекторов в CSS файл:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const gulp = require('gulp');
const concat = require('gulp-concat');
const postcss = require('gulp-postcss');
const selectorMatches = require('postcss-selector-matches');

gulp.task('styles', function() {
  return gulp.src('src/css/**/*.css')
    .pipe(concat('styles.css'))
    .pipe(postcss([selectorMatches()]))
    .pipe(gulp.dest('dist/css'));
});


В этом примере мы объединяем все CSS файлы в один файл "styles.css" с помощью gulp-concat, затем обрабатываем этот файл с помощью gulp-postcss и используем плагин postcss-selector-matches для вывода селекторов. Результат сохраняется в папке "dist/css".