Як мінімізувати CSS залпом

У цій статті я покажу простий спосіб автоматичного зменшення CSS-файлів за допомогою глотки. ?

Для початку - що таке ковток?

Gulp - це засіб виконання JavaScript, який дозволяє автоматизувати такі завдання, як…

  • Групування та мініфікація бібліотек та таблиць стилів.
  • Оновлення браузера під час збереження файлу.
  • Швидкий запуск модульних тестів.
  • Запуск аналізу коду.
  • Компіляція Less / Sass до CSS.
  • І набагато більше!

Процес ковтання працює наступним чином:

Ми можемо створювати завдання, які ми хотіли б виконати. У цих завданнях ми завантажуємо файли, над якими хочемо працювати 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.

Висновок

Це лише невеликий спосіб, яким ковток може допомогти нам у розробці наших додатків.

Ви можете знайти код цього проекту у цьому сховищі на GitHub.

Дякуємо за читання, будь ласка? і допомогти іншим знайти його.

До зустрічі. ?

Список літератури

gulp.js

Віддаючи перевагу коду перед конфігурацією, найкращими методами роботи вузла та мінімальною поверхнею API - gulp робить такі речі простими, як… gulpjs.com gulp-clean-css

Зменште css за допомогою clean-css. www.npmjs.com