автор Виниций Гуларте

В этой статье я собираюсь показать простой способ автоматически минимизировать ваши 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