Простая настройка Gulp для верстальщика

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

В этой статье мы разберем простой пример настройки Gulp и его плагинов, делается это через gulpfile.js в корне проекта. Установка самого сборщика и его плагинов осуществляется через пакетный менеджер npm.

Что мы используем в обычном проекте?

В простом проекте по верстке, в котором у нас будет папка исходников (src) и рабочего проекта (dist), мы работаем с:

HTML — в нашем случае все будет в различных .html файлах двух типов: страницы и темплейты компонентов (здесь мы будем использовать плагин gulp-file-include, что очень сильно облегчает разработку и соответствует DRY);
SASS/SCSS — будем использовать препроцессоры для удобства, те собирать будем все .scss файлы в один оптимизированный стилевой файл style.css;
JS — те или иные скрипты, все .js файлы, хотелось бы тоже собрать по всему проекту в один оптимизированный script.js;
Images — разные статические картинки, которые учавствуют в оформлении. Их будем собирать по всему проекту в одну папку без сохранения изначальной стркутуры папок, а так же оптимизировать размер;
Live Dev Server — хотелось бы как-то налету применять все изменения при разработке, за это будет отвечать локальный сервер.

Сначала мы рассмотрим отдельные части кода, потом соберем весь пазл.

Необходимые плагины

Плагины мы устанавливаем, как dev зависимости с помощью npm например.

npm i -D gulp browser-sync gulp-flatten del...

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

// COMMON
import gulp from 'gulp';
const { src, dest, watch, series } = gulp;

import { deleteAsync } from 'del';
import syncServer from 'browser-sync';
const sync = syncServer.create();

import flatten from 'gulp-flatten';

// STYLE
import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
import autoprefixer from 'gulp-autoprefixer';
import minify from 'gulp-clean-css';
import sourcemaps from 'gulp-sourcemaps';
import concat from 'gulp-concat';

// HTML
import include from 'gulp-file-include';

// IMAGES
import imagemin from 'gulp-imagemin';

HTML

В HTML нас ждет один из самых приятных сюрпризов, это возможность разделять код на файлы и подключать и в любом месте других файлов, например так:

  <head>
    @@include('src/components/meta/index.html')
    <title>Title</title>
  </head>

За работу с html будет отвечать одноименная функция, заметьте, что мы не берем все .html из проекта, а только те, что считаем страницами, при этом шаблоны подключаются из папки компонентов:

function html() {
  return src('src/pages/**/**.html') // берем все файлы по шаблону
    .pipe( 
      include({
        prefix: '@@',
        basepath: '@root',
      }),// запускаем плагин, который подставит все темплейты
    )
    .pipe(dest('dist')); // кладем файлы с сохранением структуры и проект
}

SASS/SCSS

Тут мы будем использовать последовательное включение разных плагинов для потока файлов, большинство названий говорящие, так что особых пояснений не требуется. Если что-то не ясно, можно уточнить по имени плагина.

function scss() {
  return src('src/**/**.scss') // берем все файлы с расширением .scss
    .pipe(sourcemaps.init()) // начинаем собирать sourcemap информацию
    .pipe(autoprefixer()) // добавляем браузерные префиксы
    .pipe(sass().on('error', sass.logError)) // препроцессор sass
    .pipe(concat('style.min.css')) // собираем все в 1 файл
    .pipe(minify()) // минифицируем
    .pipe(sourcemaps.write('.')) // указываем sourcemap  туже директорию
    .pipe(dest('dist/assets/css')); // сохраняем конечный фалй
}

JS

C JS все достаточно просто, собираем в один файл всё с расширением .js. Но Вы можете подключить дополнительные плагины для манификации кода например.

function js() {
  return src('src/**/**.js') // выбираем файлы по маске
    .pipe(concat('script.js')) // сиединяем в один файл script.js
    .pipe(dest('dist/assets/js')); // сохраняем в необходимую директорию
}

Images

Собираем все картинки в папке, и обрабатываем необходимым образом.

function images() {
  return src('src/assets/images/*') // выбираем файлы по маске
    .pipe(imagemin()) // оптимизируем картинки
    .pipe(flatten()) // избавляемся от вложенности, можно убрать
    .pipe(dest('dist/assets/images/')); // сохраняем в проект
}

Вспомогательные функции

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

function clear() {
  return deleteAsync('dist'); // удаляем все файлы из итогового проекта
}

function serve() {
  // инициализируем сервер, который хостит нашу папку итогового проекта
  sync.init({ server: './dist' }); 

  // следим за файлами по маске и запускаем функции при их изменении
  // далее перезагружаем сервер
  watch(['src/**/**.html'], series(html)).on('change', sync.reload);
  watch(['src/**/**.scss'], series(scss)).on('change', sync.reload);
  watch(['src/assets/images/*'], series(images)).on('change', sync.reload);
  watch('src/**/**.js', series(js)).on('change', sync.reload);
}

Функции сборки проекта

В итоге для удобства нам хотелось бы иметь короткие функции сборки всего проекта и запуска их из консоли. Нам понадобятся dev и build сборки. Запускать их будем так:

gulp dev
gulp build

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

// series последовательно запускает указанные функции
const build = series([clear, scss, html, js, images]);
const dev = series([clear, scss, html, js, images, serve]);

export { build, dev };

Как видно из кода, различием dev сборки только в том, что она запускает тестовый сервер. Но Вы конечно можете кастомизировать порядок и настройки под ваши задачи и вкус.

Итоговый файл настройки

// COMMON
import gulp from 'gulp';
const { src, dest, watch, series } = gulp;

import { deleteAsync } from 'del';
import syncServer from 'browser-sync';
const sync = syncServer.create();
import flatten from 'gulp-flatten';

// STYLE
import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
import autoprefixer from 'gulp-autoprefixer';
import minify from 'gulp-clean-css';
import sourcemaps from 'gulp-sourcemaps';
import concat from 'gulp-concat';

// HTML
import include from 'gulp-file-include';

// IMAGES
import imagemin from 'gulp-imagemin';

function html() {
  return src('src/pages/**/**.html')
    .pipe(
      include({
        prefix: '@@',
        basepath: '@root',
      }),
    )
    .pipe(dest('dist'));
}

function images() {
  return src('src/assets/images/*')
    .pipe(imagemin())
    .pipe(flatten())
    .pipe(dest('dist/assets/images/'));
}

function scss() {
  return src('src/**/**.scss')
    .pipe(sourcemaps.init())
    .pipe(autoprefixer())
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('style.min.css'))
    .pipe(minify())
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist/assets/css'));
}

function js() {
  return src('src/**/**.js').pipe(concat('script.js')).pipe(dest('dist/assets/js'));
}

function clear() {
  return deleteAsync('dist');
}

function serve() {
  sync.init({ server: './dist' });

  watch(['src/**/**.html'], series(html)).on('change', sync.reload);
  watch(['src/**/**.scss'], series(scss)).on('change', sync.reload);
  watch(['src/assets/images/*'], series(images)).on('change', sync.reload);
  watch(['src/**/**.js'], series(js)).on('change', sync.reload);
}

const build = series([clear, scss, html, js, images]);
const dev = series([clear, scss, html, js, images, serve]);

export { build, dev };

Заключение

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

Если остались вопросы, напишите нам на почту, мы постараемся помочь!