Ми пройшли самі основи Gulp та створили робочий процес, який дозволяє компілювати Sass у CSS, одночасно відстежуючи зміни у файлах HTML та JS. Ми можемо запустити це завдання за допомогою команди gulp у командному рядку.
Ми також створили другу задачу build, яка створює папку dist для робочого сайту. Ми скомпілювали Sass у CSS, оптимізували всі наші ресурси та скопіювали необхідні папки в папку dist. Щоб виконати це завдання, у командному рядку нам просто потрібно набрати gulp build.
Нарешті, у нас є завдання clean, яке видаляє зі згенерованої папки dist всі створені кеші зображень, що дозволяє видалити будь-які старі файли, які ненароком залишилися в dist.
Ми створили надійний робочий процес, якого достатньо для більшості веб-розробників. Але Gulp може запропонувати набагато більше, щоб процес став ще кращим. Ось кілька ідей.
Для розробки:
- використання Autoprefixer для написання CSS-коду без вендорних префіксів;
- додавання Sourcemaps для полегшення налагодження;
- створення спрайтів за допомогою sprity;
- компіляція лише тих файлів, які були змінені, за допомогою gulp-change ;
- написання ES6 з Babel або Traceur;
- розбиття Javascript-файлів на модулі за допомогою Browserify, webpack або jspm;
- розбиття HTML за допомогою шаблонизаторів, таких як Handlebars або Swig ;
- розділення gulpfile на дрібніші файли за допомогою require-dir ;
- автоматична генерація скрипта Modernizr за допомогою gulp-modernizr.
Для оптимізації:
- видалення невикористовуваного CSS за допомогою unCSS;
- подальша оптимізація CSS за допомогою CSSO;
- генерація рядкового CSS для продуктивності за допомогою Crit ical.
Крім процесів розробки або оптимізації ви також можете додати написання юніт-тестів на JavaScript за допомогою gulp-jasmine і навіть автоматично розгорнути папку dist на робочому сервері за допомогою gulp-rync.
Як можна бачити, незважаючи на те, що створений нами робочий процес виконує досить багато речей, можна зробити набагато більше . Створення робочого процесу, що відповідає вашим потребам, може бути надзвичайно захоплюючим і корисним, але при цьому й відібрати багато зусиль, якщо ви новачок. Ось чому я написав книгу про автоматизацію робочого процесу і запрошую безкоштовно прочитати десять розділів, якщо ви хочете дізнатися більше.
Не соромтеся звертатися до мене, якщо у вас виникли питання. Я буду радий відповісти!