Заключение

Мы прошли самые основы 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 для производительности с помощью Critical.

Кроме процессов разработки или оптимизации вы также можете добавить написание юнит-тестов на JavaScript с помощью gulp-jasmine и даже автоматически развернуть папку dist на рабочем сервере с помощью gulp-rync.

Как можно видеть, несмотря на то, что созданный нами рабочий процесс выполняет довольно много вещей, можно сделать гораздо больше. Создание рабочего процесса, отвечающего вашим потребностям, может быть чрезвычайно увлекательным и полезным, но при этом и отнять много усилий, если вы новичок.

Gulp содержит так много всего, что невозможно описать в одном руководстве. Вот почему я написал книгу об автоматизации рабочего процесса и приглашаю бесплатно прочесть десять глав, если вы хотите узнать больше.

Не стесняйтесь обращаться ко мне, если у вас возникли какие-либо вопросы. Я буду рад ответить!

Автор и редакторы

Автор: Зелл Лью
Последнее изменение: 14.12.2019
Редакторы: Влад Мержевич