Сборка front-end проекта с помощью Gulp и Node.js

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

 

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

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

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

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

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

Что такое Gulp?

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

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

npm install gulp

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

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

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

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

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

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

• Папка
  
assets

  — для исходников изображений, стилей и скриптов;
• Папка
  
public

  — результат сборки проекта будет находится именно в ней;
• 
gulpfile.js

  — файл, в котором описана логика работы сборщика;
• 
package.json

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

package.json

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

{
  "name": "gulp_project",
  "version": "1.0.0",
  "description": "Example",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "remontka",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-csso": "^1.0.0",
    "gulp-concat": "^2.6.0",
    "gulp-uglify": "^1.2.0",
    "gulp-imagemin": "^2.3.0",
    "gulp-sass": "^2.1.1"
  }
}

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

• Название проекта
  
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).

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

npm install

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

package.json

.

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

node_modules

.