В этой статье я покажу простой способ автоматической минимизации файлов 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. Этот файл будет отвечать за наши задачи.
Мы также создадим две папки в этом репозитории. Один будет называться стилями, в которых останутся наши файлы стилей, а другой - dist, куда будут помещены минифицированные файлы.
В итоге наш проект будет иметь такую структуру:
В Gulpfile.js
В начале файла мы вызываем пакеты, которые будем использовать.
С вызванными пакетами мы создадим ответственную задачу, уменьшив наши файлы.
Вам может быть интересно - вы уже можете минимизировать свои файлы? Да, выполнив команду gulp в терминале с указанием имени задачи.
Но постоянное выполнение этой команды немного раздражает, не так ли? Мы можем создать метод для наблюдения за изменениями файлов в папке стилей.
Таким образом, запуск команды gulp будет ждать изменений в выбранных файлах, чтобы активировать задачу minify-css.
Заключение
Это лишь небольшой способ, которым gulp может помочь нам в разработке наших приложений.
Вы можете найти код этого проекта в этом репозитории на GitHub.
Спасибо, что прочитали, не стесняйтесь 👏 и помогите другим найти его.
До скорой встречи. 😃
