Мы прошли самые основы Gulp и создали рабочий процесс, который позволяет компилировать Sass в CSS, одновременно отслеживая изменения в файлах HTML и JS. Мы можем запустить эту задачу с помощью команды gulp в командной строке.
Мы также создали вторую задачу build, которая создаёт папку dist для рабочего сайта. Мы скомпилировали Sass в CSS, оптимизировали все наши ресурсы и скопировали необходимые папки в папку dist. Чтобы выполнить эту задачу, в командной строке нам просто нужно набрать gulp build.
Наконец, у нас есть задача clean, которая удаляет из сгенерированной папки dist все созданные кэши изображений, что позволяет удалить любые старые файлы, которые ненароком остались в dist.
Мы создали надёжный рабочий процесс, которого достаточно для большинства веб-разработчиков. Но Gulp может предложить гораздо больше, чтобы процесс стал ещё лучше. Вот несколько идей.
Для разработки:
Для оптимизации:
- удаление неиспользуемого CSS с помощью unCSS;
- дальнейшая оптимизация CSS с помощью CSSO;
- генерация строчного CSS для производительности с помощью Critical.
Кроме процессов разработки или оптимизации вы также можете добавить написание юнит-тестов на JavaScript с помощью gulp-jasmine и даже автоматически развернуть папку dist на рабочем сервере с помощью gulp-rync.
Как можно видеть, несмотря на то, что созданный нами рабочий процесс выполняет довольно много вещей, можно сделать гораздо больше. Создание рабочего процесса, отвечающего вашим потребностям, может быть чрезвычайно увлекательным и полезным, но при этом и отнять много усилий, если вы новичок.
Gulp содержит так много всего, что невозможно описать в одном руководстве. Вот почему я написал книгу об автоматизации рабочего процесса и приглашаю бесплатно прочесть десять глав, если вы хотите узнать больше.
Не стесняйтесь обращаться ко мне, если у вас возникли какие-либо вопросы. Я буду рад ответить!