GULP установка, плагины, gulpfile-s:

GULP установка, плагины, gulpfile-s:#

gulp-clean-css#

  • gulp-clean-css: Это основной плагин для минификации и оптимизации CSS. Он удаляет лишние пробелы, комментарии, сжимает код и в некоторых случаях оптимизирует его структуру для уменьшения размера файла.

npm install --save-dev gulp gulp-concat gulp-clean-css gulp-autoprefixer

gulp-postcss с плагинами PostCSS:#

  • cssnano: Это мощный оптимизатор CSS. Он не просто минифицирует, но и выполняет более глубокую оптимизацию: удаляет дублирующиеся правила, объединяет селекторы, преобразует цвета и выполняет другие операции для максимального сжатия кода.

  • autoprefixer: Добавляет вендорные префиксы (-webkit-, -moz-) для поддержки старых версий браузеров, что является своего рода оптимизацией для кроссбраузерности.

  • postcss-discard-unused: Этот плагин удаляет неиспользуемые правила CSS (например, если вы импортировали весь фреймворк, но используете только несколько классов).

npm install --save-dev gulp-postcss postcss postcss-import gulp-autoprefixer gulp-clean-css

npm install --save-dev gulp 

npm install -g gulp-cli

Параметры CSSnano#

минималный набор#

cssnano({
  preset: ['default', {
    calc: false,                    // ВАЖНО: не трогать calc/clamp
    discardComments: {
      removeAll: true
    },
    normalizeWhitespace: true,
    colormin: true,
    minifyFontValues: true,
    minifyGradients: true,
    minifySelectors: true,
    
    // Безопасные отключения:
    reduceIdents: false,            // Не ломать @keyframes имена
    zindex: false,                  // Не трогать z-index
    discardUnused: false,           // Не удалять "неиспользуемые" шрифты/keyframes
    mergeIdents: false,             // Безопаснее не объединять идентификаторы
    cssDeclarationSorter: false     // Не менять порядок свойств
  }]
})

максимальный набор#

cssnano({
  preset: ['default', {
    // === Calc и математические функции ===
    calc: false,                    // Не оптимизировать calc() выражения
    
    // === Цвета ===
    colormin: true,                 // Минимизировать цвета (#ffffff -> #fff)
    
    // === Комментарии ===
    discardComments: {              
      removeAll: true               // Удалить все комментарии
      // removeAllButFirst: false   // Оставить только первый комментарий
    },
    
    // === Пробелы и форматирование ===
    normalizeWhitespace: true,      // Удалить лишние пробелы и переносы
    
    // === At-rules ===
    discardEmpty: true,             // Удалить пустые правила
    discardDuplicates: true,        // Удалить дубликаты правил
    discardOverridden: true,        // Удалить перезаписанные @keyframes и @counter-style
    discardUnused: false,           // Удалить неиспользуемые @keyframes, @counter-style, @font-face
    
    // === Шрифты ===
    minifyFontValues: true,         // Минимизировать font и font-family
    
    // === Градиенты ===
    minifyGradients: true,          // Минимизировать градиенты
    
    // === Селекторы ===
    minifySelectors: true,          // Минимизировать селекторы
    discardComments: {
      removeAll: true
    },
    
    // === URL и пути ===
    normalizeUrl: true,             // Нормализовать URL
    normalizeUnicode: false,        // Конвертировать Unicode в ASCII
    
    // === Значения ===
    normalizeString: true,          // Нормализовать строки (кавычки)
    normalizeCharset: true,         // Добавить @charset если нужно
    normalizeDisplayValues: true,   // Нормализовать display значения
    normalizePositions: true,       // Нормализовать position значения (background-position и т.д.)
    normalizeRepeatStyle: true,     // Нормализовать repeat стили
    normalizeTimingFunctions: true, // Нормализовать timing functions
    
    // === Единицы измерения ===
    convertValues: true,            // Конвертировать значения (ms -> s, и т.д.)
    
    // === Порядок свойств ===
    cssDeclarationSorter: false,    // Не сортировать CSS свойства
    
    // === SVG ===
    svgo: true,                     // Оптимизировать inline SVG
    
    // === Слияние правил ===
    mergeRules: true,               // Объединять одинаковые правила
    mergeLonghand: true,            // Объединять longhand свойства (margin-top, margin-right -> margin)
    mergeIdents: true,              // Объединять одинаковые @keyframes и @counter-style
    
    // === Упрощение ===
    reduceIdents: false,            // Сокращать имена @keyframes, @counter-style (может сломать JS)
    reduceInitial: true,            // Заменять initial на actual values где возможно
    reduceTransforms: true,         // Упрощать transform функции
    
    // === Z-index ===
    zindex: false,                  // Не rebasing z-index значений (может сломать layout)
    
    // === Prefixes ===
    autoprefixer: false,            // Не удалять outdated prefixes (у вас уже есть autoprefixer)
    
    // === Остальное ===
    uniqueSelectors: true,          // Удалять дубликаты селекторов
    rawCache: true,                 // Кешировать сырые значения для производительности
    
    // === Порядок медиа-запросов ===
    orderValues: false,             // Не менять порядок значений (может сломать специфичность)
  }]
})

Install GULP#

#!/bin/bash
# install-local-gulp.sh
# Скрипт для установки gulp + популярных плагинов (sass, autoprefixer, browser-sync и т.д.)

# Остановить выполнение при ошибке
set -e

echo "🚀 Установка Gulp + плагинов..."

# Проверяем, есть ли package.json
if [ ! -f package.json ]; then
  echo "📦 package.json не найден, создаем..."
  npm init -y
fi

# Устанавливаем gulp и плагины локально
npm install --save-dev \
  gulp \
  sass \
  gulp-sass \
  gulp-sourcemaps \
  gulp-autoprefixer \
  gulp-clean-css \
  cssnano \
  perfectionist \
  browser-sync \
  gulp-postcss \
  postcss \
  postcss-import \
  postcss-discard-unused \
  gulp-rename

# Проверяем, установлен ли gulp-cli глобально
if ! command -v gulp &> /dev/null
then
  echo "⚙️  Устанавливаю gulp-cli глобально..."
  sudo npm install -g gulp-cli
else
  echo "✅ gulp-cli уже установлен глобально"
fi

echo "⚙️  Устанавливаю normalize.css"
npm install normalize.css


echo "🎉 Установка завершена!"

gulpfile:#

gulpfile SCSS to CSS v. 1#

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

function compileSass() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
}

exports.sass = compileSass;

gulpfile SCSS to CSS v. 2#

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const rename = require('gulp-rename');

gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass({
      outputStyle: 'expanded' // или 'compressed'
    }).on('error', sass.logError))
    .pipe(rename({
          basename: 'style', // 'styles.css'
          extname: '.css'
    }))
    .pipe(gulp.dest('assets/css'));
});

gulp.task('watch', function() {
  gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
});

Объединение импорта#

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const autoprefixer = require('gulp-autoprefixer'); // Оставим его для совместимости
const cleanCSS = require('gulp-clean-css');
const postcssImport = require('postcss-import');

// Пути к исходным и целевым файлам
const paths = {
  styles: {
    src: 'src/css/main.css', // Теперь указываем только главный файл
    dest: 'dist/css/'
  }
};

// Задача для обработки CSS
function styles() {
  return gulp.src(paths.styles.src)
    .pipe(postcss([
      postcssImport() // 1. Обрабатываем импорты
    ]))
    .pipe(autoprefixer({            // 2. Добавляем вендорные префиксы
      cascade: false
    }))
    .pipe(cleanCSS({ level: 2 }))    // 3. Оптимизируем и минифицируем
    .pipe(gulp.dest(paths.styles.dest)); // 4. Сохраняем результат
}

// Задача для отслеживания изменений в файлах
function watch() {
  gulp.watch('src/css/**/*.css', styles); // Отслеживаем изменения во всех файлах
}

// Задачи Gulp по умолчанию
exports.styles = styles;
exports.watch = watch;
exports.default = gulp.series(styles, watch);

Объединение файлов#

const gulp = require('gulp');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');
const autoprefixer = require('gulp-autoprefixer');

// Пути к исходным и целевым файлам
const paths = {
  styles: {
    src: 'src/css/**/*.css', // Источник: все .css файлы в папке src/css
    dest: 'dist/css/'      // Цель: папка dist/css
  }
};

// Задача для обработки CSS
function styles() {
  return gulp.src(paths.styles.src) // 1. Берем исходные файлы
    .pipe(concat('main.min.css'))    // 2. Объединяем их в один файл 'main.min.css'
    .pipe(autoprefixer({            // 3. Добавляем вендорные префиксы
      cascade: false
    }))
    .pipe(cleanCSS({ level: 2 }))    // 4. Оптимизируем и минифицируем CSS
    .pipe(gulp.dest(paths.styles.dest)); // 5. Сохраняем результат в папку назначения
}

// Задача для отслеживания изменений в файлах
function watch() {
  gulp.watch(paths.styles.src, styles);
}

// Задачи Gulp по умолчанию
exports.styles = styles;
exports.watch = watch;
exports.default = gulp.series(styles, watch); // Задача по умолчанию, запускает обе задачи
Contents