
Содержание статьи
автор Виниций Гуларте

В этой статье я собираюсь показать простой способ автоматически минимизировать ваши CSS файлы с помощью gulp. ?
Для начала – что такое gulp?
Gulp — это приложение для выполнения задач JavaScript, позволяющее автоматизировать такие задачи, как…
- Объединение и минимизация библиотек и таблиц стилей.
- Обновление браузера при сохранении файла.
- Быстрое исполнение модульных тестов.
- Запуск анализа кода
- Сборка Less/Sass в CSS.
- И гораздо больше!
Рабочий процесс gulp работает следующим образом:
Мы можем создавать задачи, которые мы хотели бы выполнить. В этих задачах мы загружаем файлы, с которыми мы хотим, чтобы gulp работал (изменять или нет), а затем возвращаем их в определенную папку возврата.
Это просто.
В этом небольшом учебнике я научу вас, как создать задачу для минимизации всех CSS файлов в вашей папке. Затем положите уменьшенные в другую папку.
Давайте начнем
Убедитесь, что на вашем компьютере установлена последняя версия пакета npm. Если у вас его нет, вы можете загрузить его здесь.
После установки npm в базовом каталоге вашего проекта мы установим gulp с помощью этих команд:
npm install gulp-cli -g
npm install gulp -D
Мы также будем использовать плагин gulp для минимизации вызова CSS gulp-clean-cssпоэтому установите его в тип проекта:
npm install gulp-clean-css --save-dev
Отлично, теперь с зависимостями, установленными в проекте, давайте создадим файл под названием Gulpfile.js. Этот файл будет отвечать за наши задачи.

Мы создадим две папки в этом хранилище. Один из них будет называться styles, где останутся файлы стилей, а другой – dist, куда пойдут уменьшенные файлы.
В итоге наш проект будет иметь следующую структуру:

В Gulpfile.js
В начале файла мы выполняем вызовы пакетов, которые мы будем использовать.
С помощью вызванных пакетов мы создадим ответственную задачу, минимизируя наши файлы.
Возможно, вы зададитесь вопросом – вы уже можете минимизировать свои файлы? Да, выполнив команду gulp в терминале со следующим названием задания.
Но постоянное исполнение этой команды немного раздражает, не правда ли? Мы можем создать метод для наблюдения за изменениями файлов в папке стилей.
Таким образом, запуск команды gulp будет ждать изменений в выбранных файлах, чтобы активировать задачу minify-css.
Вывод
Это лишь небольшой способ, который gulp может помочь нам в разработке наших программ.
Вы можете найти код для этого проекта в этом репозитории GitHub.
Спасибо, что читаете, пожалуйста, не стесняйтесь? и помочь другим найти его.
До встречи. ?
Ссылки
gulp.js
Предпочитая код конфигурации, передовые методы работы узла и минимальную поверхность API, gulp делает вещи более простыми, как…gulpjs.comgulp-clean-css
Уменьшите css с помощью clean-css.www.npmjs.com