Как да минимизирате вашия CSS с глътка

В тази статия ще покажа лесен начин за автоматично минимизиране на вашите CSS файлове с помощта на глътка. ?

За начало - какво е глътка?

Gulp е бегач на задачи на JavaScript, който ви позволява да автоматизирате задачи като ...

  • Обединяване и минимизиране на библиотеки и таблици със стилове.
  • Опресняване на браузъра ви, когато записвате файл.
  • Бързо стартиращи модулни тестове.
  • Текущ анализ на код.
  • Компилация по-малко / 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