Урок 4. Компиляция с помощью Gulp

Привет! 🙂 В прошлом уроке по Less речь шла о Компиляции на Node.js, на этот раз используем Gulp для сборки файлов. На всякий случай напомню, что предварительно должен быть установлен Nodejs и npm.

Отслеживаем зависимости с packagae.json

1. Создаем папку less
1.1. В консоли нужно перейти в папку проекта less: если находимся в родительской директории, как у меня, domains, тогда командой cd less попадем в less (см. скрин).

1.2. Теперь из директории less даем команду: npm init — генерирует необходимый нам packagae.json, предварительно задав некоторые вопросы (см. скрин):

• package name — название проекта
• version — версия
• description — описание
• entry point — точка входа, главный JS файл, обычно это index.js
• test command — скрипт, по умолчанию пропишется тестовый
• git repository — адрес / репозиторий на git, если есть
• keywords — ключевые слова
• author — автор проекта
• license — лицензия, согласно которой может использоваться проект, по умолчанию ISC

Здесь мы укажем название проекта, например, less-project (чтобы избежать конфликта с одноименным названием папки), лицензию в виде 1.0.0. и entry point — index.js. Остальные настройки можно оставить по умолчанию, нажав ENTER:

1.2. Видим в папке проекта появление файла package.json с нашими настройками:

2. Устанавливаем пакет Less и Gulp
Команда: npm i —save-dev less gulp
—save-dev — указываем на зависимость только для разработки.

3. Создаем gulpfile.js — он будет отвечать за сборку всех файлов.

4. Теперь давайте определим последовательность задач, что именно требуется выполнять с помощью Gulp:

1. Перевести less файлы в css;
2. Сконкатенировать — объединить все файлы в один bundle.css;
3. Поставить префиксы — обеспечим кроссбраузерную вёрстку;
4. Sourcemaps — чтобы знать, в каких файлах применяются стили;
5. Минификация — сжатие файлов;
6. Life reloading — возможность наблюдать за изменениями в html сразу после внесения правок в css.

5. Работаем с gulpfile.js

5.1. В gulpfile.js создаем переменную gulp и подключаем Gulp:
var gulp = require(‘gulp’);

5.2. Ставим плагин gulp-less для преобразования less файлов в css
Команда: npm i —save-dev gulp-less

5.3. Установим еще несколько пакетов одним махом:

• gulp-concat — конкатенация,
• gulp-autoprefixer — автопрефиксер и
• gulp-sourcemaps — карта исходных файлов

Команда: npm i —save-dev gulp-concat gulp-autoprefixer gulp-sourcemaps

5.4. Проверяем в package.json установку этих плагинов:

5.5. Подключаем установленные пакеты в gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');

5.6. Указываем paths (путь к исходникам) и output

var config {
  paths: {
    less: './src/less/**/*.less',
    html: './html/index.html' 	  
  },
  output: {
    cssName: 'bundle.min.css',
    path: './public'
  }
}

5.7. Создаем задачу для отслеживания less файлов

gulp.task('less', function() {
  gulp.src(config.paths.less)
});

и добавляем пайпы (pipe)

6. Создаем папку src и вложенную less для less файлов

6.1. В папке less создаем файл index.less со стилями

6.2. Gulp должен быть установлен глобально:
Команда: npm i -g

6.3. Запускаем компиляцию
Команда: gulp less
В корне проекта генерируется папка public c файлом bundle.min.css

7. Устанавливаем еще два пакета

• gulp-clean-css — сжатие и
• browser-sync — синхронизация, автоматическое обновление

Команда: npm i —save-dev gulp-clean-css browser-sync

7.1. Подключаем их в gulpfile.js:

var cleanCss = require('gulp-clean-css'); // сжатие css
var browerSync = require('browser-sync').create(); // синхронизация обновлений

7.2. Пишем pipes

7.3. В папке public создаем index.html с разметкой и подключением стилей

7.4. Создаем задачу serve для отслеживания изменений и автоматического обновления html файла

gulp.task('serve', function() {
    browerSync.init({
        server: {
            baseDir: config.output.path
        }
    });
    gulp.watch(config.paths.less, gulp.parallel('less'));
    gulp.watch(config.paths.html).on('change', browerSync.reload);
});

config.output.path — смотрит в настройках config путь для созданных файлов;

gulp.watch — следит за изменениями в указанных файлах.

Напомню, что в 4-ой версии Gulp, которая вышла 10 декабря 2018 года и устанавливается по умолчанию, исчезли квадратные скобки. В
Gulp.js 4.0 появились методы series() и parallel() для объединения задач:

series(…) запускает задачи по одной в указанном порядке, а
parallel(…) выполняет задачи одновременно в любом порядке.

7.5. Создаем дефолтную задачу для выполнения по умолчанию less и serve

gulp.task('default', gulp.parallel('less', 'serve'));

7.6. Запускаем командой: gulp

Открывается index.html в браузере, в Инструментах разработчика и вкладке Sources применяемые стили bundle.min.css — работает!

7.7. Чтобы проследить автоматическое обновление, добавим в index.html текст со стилями и сохраним.
Обновления сразу отображаются, не нужно обновлять вручную, так работает browerSync.reload

Получился готовый сборщик Gulp, теперь можно по достоинству оценить резко возросшую скорость вёрстки 🙂

Добавляю для скачивания этот пакет gulp-base.rar. Он, конечно, без node_modules. Все плагины устанавливаются командой из консоли npm install путем прочтения package.json — справочника зависимостей проекта от установленных плагинов.

Официальная документация LESS http://lesscss.org

В следующем уроке — переменные, это интересно 😉

При написании статьи использовались материалы WebForMySelf.com