Планировщик задач Gulp - мощный инструмент автоматизации для фронтенд-разработчика.

Подготовка к работе



Установка Node.js открывает вам доступ к работе с npm - менеджером пакетных файлов (или, проще говоря, менеджером дополнений)

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

Для этого, открываем папку своего проекта в редакторе кода (я использую VS Code) и в окне терминала прописываем:

Код
npm init

Вам будет предложено ввести информацию о своём проекте (например, название, версию проекта, краткое описание, автора проекта, тип лицензии).
Если вы не хотите это всё заполнять, можете просто пропускать вопросы, нажимая Enter, в самом конце необходимо подтвердить ввод, ответив на вопрос "Is this OK?" утвердительно.



Теперь в папке вашего проекта появился файл package.json и вы можете устанавливать необходимые пакеты (расширения) в проект.



Установка необходимых пакетов для проекта


Устанавливать какие-либо пакеты(расширения) для проекта необходимо, опираясь на те задачи, которые вы ставите в проекте.

Какие бывают пакеты, а также документацию по их установке и использованию можно посмотреть здесь.

Далее мы последовательно установим группу пакетов, попутно я буду писать комментарии, для чего нужен тот или иной устанавливаемый пакет.

Сперва установим утилиту командной строки для Gulp, для этого в окне терминала VS Code выполняем команду:

Код
npm install gulp-cli -g

Флаг -g показывает, что мы произвели сейчас глобальную установку (не только для этого конкретного проекта), теперь сделаем установку еще и локально:

Код
npm install gulp-cli --save-dev

после локальной установки в файле package.json вы увидите, что появился блок devDependencies (зависимости разработчика) и в нём отразился установленный пакет gulp-cli. За внесение записей в блок devDependencies как раз и отвечает флаг --save-dev



И каждый раз, когда вы будете локально устанавливать какой-либо пакет, он будет прописываться в package.json

Устанавливаем сам gulp, прописываем команду:

Код
npm install gulp --save-dev

после завершения установки в папке вашего проекта появится новая подпапка с именем node_modules, внутри которой будет папка gulp.



В своём проекте мне необходимо, чтобы написанный мною sass или scss код автоматически преобразовывался (компилировался) в обычный css.
Установим для этого пакет gulp-sass:

Код
npm i gulp-sass --save-dev

Также я хотел бы, чтобы при изменениях в html и css файлах браузер автоматически обновлял бы запущенный локальный сервер, чтобы можно было сразу увидеть результат изменений.
Для этого установим такой пакет как Browsersync, установим его глобально

Код
npm install -g browser-sync

и потом еще локально:

Код
npm i browser-sync --save-dev

У себя на Windows 10 я столкнулся с тем, что политика безопасности блокирует исполнение скриптов с расширением .ps1 и поэтому при установке выдаётся ошибка.
Что делать в таком случае?


Необходимо изменить дефолтные настройки Windows через командную строку PowerShell.

Запускаем PowerShell от имени администратора

Проверяем текущие параметры для политики выполнения:

Get-ExecutionPolicy -List

Устанавливаем требуемый уровень (меняем политику выполнения)

Set-ExecutionPolicy -Scope LocalMachine Unrestricted

Да, кстати, если выводит сообщение что в конкретной области политика переопределена, например, для Current User, то менять политику выполнения для определенной области так:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted

Следующий нужный нам пакет, gulp-autoprefixer, необходим для подстановки вендорных префиксов в CSS-коде там, где это необходимо. Устанавливаем:

Код
npm i gulp-autoprefixer --save-dev

Устанавливаем пакет gulp-clean-css (сжимает наш css-код и оптимизирует)

Код
npm i gulp-clean-css --save-dev

Пакет gulp-rename позволяет переименовывать файлы, например, для того, чтобы скомпилированный sass-код выводился в файл не style.css, а в файл с именем style.min.css

Код
npm i gulp-rename --save-dev

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

Настройка файла gulpfile.js


В корневой папке своего проекта создайте новый файл с именем gulpfile.js. В этом файле прописываются те задачи(таски), которые нуждаются в автоматизации при работе с проектом.



Сначала мы должны указать, какие пакеты используются в проекте, пропишем их в файле gulpfile.js:

Код

const gulp = require('gulp');
const browserSync = require('browser-sync');
const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
const autoprefixer = require('gulp-autoprefixer');
const rename = require("gulp-rename");

Команда require как раз и служит для подключения одного модуля к другому. Получается, мы как бы собираем единый рабочий пакет проекта.

Теперь давайте создадим первую задачу (первый таск), которая будет работать при помощи gulp.
В общем виде задача создаётся так:

Код
gulp.task('название задачи', функция)

Первой нашей задачей, назовём её server, будет запуск локального сервера, который будет у нас запускаться из папки src, где он сам подхватит файл index.html (название файла обязательно должно быть именно таким)

Код

  gulp.task('server', function() {

  browserSync({
  server: {
  baseDir: "src"
  }
  });

Следующая задача, назовём её styles, позволит нам автоматически компилировать sass или scss код, который будет браться из папки sass, в css, при этом скомпилированный код будет сохраняться в файл стилей в сжатом виде с суффиксом min, то есть файл style.min.css, расположенный в папке src и подпапке css.

Дополнительно к этому, в файле css будут там где это необходимо, добавлены вендорные префиксы и файл будет оптимизирован.
В конце у нас обновляется локальный сервер в браузере.

Код

  gulp.task('styles', function() {
  return gulp.src("src/sass/**/*.+(scss|sass)")
  .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
  .pipe(rename({suffix: '.min', prefix: ''}))
  .pipe(autoprefixer())
  .pipe(cleanCSS({compatibility: 'ie8'}))
  .pipe(gulp.dest("src/css"))
  .pipe(browserSync.stream());
  });

Чтобы gulp отслеживал какие-либо изменения в файлах проекта, добавим ещё одну задачу, назовём её watch:

Код

  gulp.task('watch', function() {
  gulp.watch("src/sass/**/*.+(scss|sass)", gulp.parallel('styles'));
  gulp.watch("src/*.html").on('change', browserSync.reload);
  });

Данная задача говорит, что если были какие-то изменения в файлах sass или scss стилей, то нужно запустить задачу styles.
Если же были изменения в html-файлах, то необходимо обновить браузер.

И последней задачей мы пропишем запуск gulp по умолчанию, default:

Код
gulp.task('default', gulp.parallel('watch', 'server', 'styles'));

При этом будут запускаться все задачи.

Для того, чтобы проверить как работает gulp, в терминале выполните команду

Код
gulp

В данном случае запустится задача default (по умолчанию), при этом откроется браузер и запустится локальный сервер по адресу http://localhost:3000

Если же нужно запустить какую то одну задачу в отдельности, например, задачу server, то прописываете

Код
gulp server

Остановить сервер можно с помощью комбинации клавиш CTRL + C

Приятный бонус от browsersync


Если вы запустите gulp и в окне браузера продублируете вкладку с адресом http://localhost:3000, но только порт замените на 3001, то у вас откроется страница с настройками



Во вкладке External вы увидите ссылку типа http://192.168.1.65:3000, если открыть её в браузере на другом устройстве, подключенном к той же wi-fi сети (ноутбуке или мобильном телефоне например), то вы на нём сможете также отслеживать все изменения этой страницы.

Очень удобно: пишете код на одном устройстве, отслеживаете визуально изменения на другом!

Как использовать gulpfile.js одного проекта в другом


Если в каком-то своём новом проекте вы планируете использовать тот же стек пакетов, то вам достаточно скопировать файлы package.json и gulpfile.js в папку этого нового проекта.

Откройте теперь папку этого вашего нового проекта в VS Code и в терминале выполните команду:

Код
npm i

После этого все те зависимости, что прописаны в package.json, установятся в этот проект.

Комментарии к материалу:

0
ABC
(10.06.2020 22:53)

Дополнительно в файле package.json добавьте настройки для autoprefixer, поставьте запятую после блока devDependencies и добавьте:

Код

   "browserslist": [
   "defaults",
   "not IE 11",
   "not IE_Mob 11",
   "maintained node versions"
   ]

avatar