Хотите набрать побольше баллов в Google Page Speed? Не знаете что такое «сборка front-end»? Тогда вам сюда, будет интересно.

Что такое Node.JS?

Node.JS принято называть «северным JavaScript». Эта платформа позволяет писать программы, используя синтаксис JavaScript.

Есть реализации для Windows, Mac OS и Linux.

В комплект входит менеджер пакетов NPM, с помощью которого можно устанавливать пакеты.

Ссылки: node.js || npm

Что такое Gulp?

Gulp — это пакет, написанный на Node.JS, который помогает веб-мастерам осуществлять сборку проектов на этапе верстки макетов.

Для установки Gulp необходимо воспользоваться командной строкой.

В конце данной статьи находится файл, который поможет собрать типовой проект.

В этом примере с помощью Gulp мы сделаем следующее:

  • Автоматически оптимизируем изображения для веба;
  • Собираем один минифицированный файл стилей из предпроцессоров (SASS, SCSS);
  • Собираем один минифицированный файл со скриптами;

Как собирать front-end с помощью Gulp?

Чтобы понять, как все работает, разберем все по шагам.

Структура проекта

Структура проекта

Структуру можно посмотреть на скриншоте.

  • Папка assets — для исходников изображений, стилей и скриптов;
  • Папка public — результат сборки проекта будет находится именно в ней;
  • gulpfile.js — файл, в котором описана логика работы сборщика;
  • package.json — файл, в котором содержатся информация о программах и плагинах, использующихся для корректной работы Gulp.

package.json

Содержимое файла:

Из этого файла понятно следующее:

  • Название проекта gulp_project, версия и описание;
  • Главный файлом является gulpfile.js;
  • Автор проекта, лицензия — все это не столь важно и попросту эти поля могут быть пустыми;
  • Интересным пунктом является devDependencies. В нем описаны зависимости.

Файл можно отредактировать в обычном текстовом редакторе. Его также можно создать для нового проекта командой npm int.

Исходя из этого, Node.JS понимает, что для работы нам понадобятся:

  • Gulp версии 3.9.0 и выше для сборки;
  • Gulp-csso версии 1.0.0 и выше — плагин для минификации стилей (css);
  • Gulp-concat версии 2.6.0 и выше — плагин для склейки нескольких файлов в один;
  • Gulp-uglify версии 1.2.0 и выше — плагин для минификации javascript;
  • Gulp-imagemin версии 2.3.0 и выше — плагин для оптимизации изображений;
  • Gulp-sass версии 2.1.1 и выше — плагин для получения css из sass (scss);

Отлично! После этого нужно все это установить. Делается это из командной строки. Находясь в папке с проектом нужно выполнить команду:

Вся необходимая информация будет взята из package.json.

Установка Gulp и плагинов в директорию проекта

Установка Gulp и плагинов в директорию проекта

После всего этого волшебства появится служебная папка node_modules.

gulpfile.js

Содержимое файла:

Главная фишка — в задаче watch. Запустив ее один раз, можно спокойно работать с источниками, и проект будет автоматически собираться при каждом сохранении редактируемых файлов.

На выходе получим готовый к публикации в интернете шаблон.

Выполнение задачи watch

Выполнение задачи watch

Задачи можно запускать отдельно. В итоге, в архиве в конце статьи вас ждет следующее:

Конечный вариант структуры проекта

Конечный вариант структуры проекта

! Обратите внимание на то, что распаковав у себя этот архив, прежде всего необходимо будет выполнить команду npm install. Папка эта содержит довольно большое количество файлов, и каждый раз копировать/вставлять их — пустая трата времени.

В заключении

Есть огромное множество других полезных плагинов. Например, прекрасный шаблонизатор Jade, который в разы ускоряет написание html кода, кому-то может понадобится LESS и так далее.

Представленный пример — всего лишь платформа и шаблон, с которого быстро и без особых знаний можно начать пользоваться всеми этими прекрасными фишками.

Скачать

Скачать пример проекта из статьи


  1. Спасибо за статью. но вот вопрос я не вижу index.html, а вопрос состоит в том, что при работе с index.html link href, script src, а после сборки имеем другие, гуглю битый час не могу найти решения, как вы решаете этот вопрос?

    Ярослав
    • Конкретно в этом примере все ресурсы собираются в public/css/style.css и public/js/min.js.

      В index.html подключаются только эти два файла. А редактируются файлы из папки assets.

      При каждом сохранении файлов в папке assets обновляются файлы public/css/style.css и public/js/min.js (при запущенной задаче watch), и таким образом мы всегда имеем актуальную версию верстки.

      Дмитрий Ильичев (Автор)
  2. Файл в конце статьи не скачивается! 🙁

    Александр
    • Проверили, вроде все в порядке, но на всякий случай отправил Вам файл в письме.

      Дмитрий Ильичев (Автор)
  3. Огромное спасибо!
    Ваша статья сэкономила мне пару часов времени!

    mbarev
  4. Супер. Спасибо за понятное объяснение. Такой вопрос — а как собирать многостраничный сайт?
    Например с такой структурой

    Алексей
    • Все то же самое. Немного поправить пути в gulpfile.js там где есть команда gulp.dest. И вообще можете сохранять файлы куда угодно.

      Это кстати не только web’а и разработки сайтов касается.

      Дмитрий Ильичев (Автор)
  5. А нельзя было сделать с html и обновлением браузера при обновлении любого файла?

    lalala
    • Конечно можно. Это делается с помощью livereload. Просто статья предназначалась для быстрого старта и ознакомления с возможностями Gulp, поэтому мы описали базовый минимум.

      Дмитрий Ильичев (Автор)

Оставить комментарий