Мы прошли самые основы Gulp и создали рабочий процесс, который позволяет компилировать Sass в CSS, одновременно отслеживая изменения в файлах HTML и JS. Мы можем запустить эту задачу с помощью команды gulp в командной строке.
Мы также создали вторую задачу build, которая создаёт папку dist для рабочего сайта. Мы скомпилировали Sass в CSS, оптимизировали все наши ресурсы и скопировали необходимые папки в папку dist. Чтобы выполнить эту задачу, в командной строке нам просто нужно набрать gulp build.
Наконец, у нас есть задача clean, которая удаляет из сгенерированной папки dist все созданные кэши изображений, что позволяет удалить любые старые файлы, которые ненароком остались в dist.
Мы создали надёжный рабочий процесс, которого достаточно для большинства веб-разработчиков. Но Gulp может предложить гораздо больше, чтобы процесс стал ещё лучше. Вот несколько идей.
Для разработки:
Как можно видеть, несмотря на то, что созданный нами рабочий процесс выполняет довольно много вещей, можно сделать гораздо больше. Создание рабочего процесса, отвечающего вашим потребностям, может быть чрезвычайно увлекательным и полезным, но при этом и отнять много усилий, если вы новичок.
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.
Как можно видеть, несмотря на то, что созданный нами рабочий процесс выполняет довольно много вещей, можно сделать гораздо больше. Создание рабочего процесса, отвечающего вашим потребностям, может быть чрезвычайно увлекательным и полезным, но при этом и отнять много усилий, если вы новичок.
Gulp содержит так много всего, что невозможно описать в одном руководстве. Вот почему я написал книгу об автоматизации рабочего процесса и приглашаю бесплатно прочесть десять глав, если вы хотите узнать больше.