Gulp и posthtml-include

Вопрос-ответ JavaScript
1

Сделал сборку на галпе, всё хорошо, работает:

const { src, dest, series, parallel, watch } = require('gulp');
const plumber = require('gulp-plumber');
const del = require('del');
const posthtml = require('gulp-posthtml');
const include = require('posthtml-include');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const browserSync = require('browser-sync').create();

function html() {
  return src('./source/*.html')
    .pipe(posthtml([include()]))
    .pipe(dest('./dist'));
}

function css() {
  return src('./source/scss/style.scss', { sourcemaps: true })
    .pipe(plumber())
    .pipe(sass())
    .pipe(postcss([ autoprefixer() ]))
    .pipe(csso())
    .pipe(rename({ suffix: '.min' }))
    .pipe(dest('./dist/css', { sourcemaps: true }))
    .pipe(browserSync.stream());
}

function js() {
  return src('./source/js/*', { sourcemaps: true })
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(dest('./dist/js', { sourcemaps: true }));
}

function copy() {
  return src([
    './source/images/*',
    './source/fonts/*'], { base: './source'})
    .pipe(dest('./dist'));
}

function clean() {
  return del('./dist');
}

function server() {
  browserSync.init({
    server: {
        baseDir: './dist'
    }
  });

  watch("./source/*.html", series(html, refreshPage));
  watch("./source/scss/**/*", css);
  watch("./source/js/**/*", series(js, refreshPage));
}

function refreshPage(done) {
  browserSync.reload();
  done();
}

function build(done) {
  copy();
  css();
  js();
  html();
  done();
}

exports.default = series(clean, build, server);
exports.build = series(clean, build);
exports.clean = clean;

И есть файл index.html, в котором идёт подключение векторного спрайта из внешнего файла таким образом:

<body class="body">
    <div style="display: none">
      <include src="./dist/images/sprite.svg"></include>
    </div>

    <div class="wrapper">
      <header class="page-header">
        <div class="page-header__left-part">
          <a class="page-header__logo logo" href="">

Файловая структура выглядит так (папка dist собирается при запуске сборки):

Но есть 2 проблемы:

  1. Почему-то сборка не видит файл sprite.svg в папке dist (если в html вместо ./dist/images написать .source/images, всё прекрасно работает)
  2. Функцию clean приходится выносить отдельно - при попытке засунуть её в функцию build сборка работает через раз.
    Подскажите, пожалуйста, как этот вопрос решить.
2

Я нашёл решение, чисто методом тыка: нужно было записать последовательность вызова методов галпа в переменную, а не в функцию. Вот так работает и дублирования кода нет:

const build = series(clean, copy, parallel(css, js), html);

exports.default = series(build, server);
exports.build = build;
exports.clean = clean;