Неожиданная функция токена + минимизация файлов в Gulpfile

Question

У меня следующая структура папок:

theme
   assets
      build
      src
         sass
            globals
               _base.scss
               _client-styles.scss
            _variables.scss
            style.scss
    template-parts
       parts
           hero
              hero.php
              hero.scss
    style.css

style.scss выглядит так:

@import "variables.scss";
@import "globals/**/**.scss";
@import "/../../../template-parts/**/**/*.scss";

Я пытаюсь достичь с помощью gulp, чтобы скомпилировать все из style.scss в минимизированный CSS-файл.Я довольно новичок в gulp и должен скомпилировать следующий gulpfile на основе фрагментов, которые я нашел в Интернете.Тем не менее, я получаю неожиданную ошибку функции токена при запуске gulp?

gulpfile.js

const assets = 'assets/';
const wpComponents = 'template-parts/';

const gulp          = require('gulp'),
      autoprefixer  = require('gulp-autoprefixer'),
      sass          = require('gulp-sass'),
      concat        = require('gulp-concat'),
      uglify        = require('gulp-uglify'),
      sassGlob      = require('gulp-sass-glob');
const plumber       = require('gulp-plumber'),
      eslint        = require('gulp-eslint');
const scss          = assets + 'src/sass/',
      js            = assets + 'src/js/',
      jsDist        = assets + 'build/js/';
const wpThemeFiles    = wpComponents + '**/**/*.php',
      wpStyleFiles    = scss + '**/*.scss',
      wpJsFiles       = js + '**/*.js',

function css() {
  return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss',scss + 'style.scss'], { sourcemaps: true })
    .pipe(sassGlob())
    .pipe(plumber())
    .pipe(sass({
      outputStyle: 'expanded'
    }).on('error', sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(concat('theme.min.css'))
    .pipe(gulp.dest(assets + 'build/css/', { sourcemaps: '.' }));
}

function editorCSS() {
  return gulp.src(scss + 'style-editor.scss', { allowEmpty: true })
    .pipe(sass({
      outputStyle: 'compressed'
    }).on('error', sass.logError))
    .pipe(gulp.dest(assets + 'build/css/'));
}

function javascript() {
  return gulp.src([
     'node_modules/jquery/dist/jquery.min.js',
     'node_modules/bootstrap/dist/js/bootstrap.min.js',
     wpJsFiles,
     vcJsFiles
    ])
    .pipe(plumber())
    .pipe(concat('theme.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest(jsDist));
}

// Lint scripts
function scriptsLint() {
  return gulp
    .src([wpJsFiles, vcJsFiles, "./gulpfile.js"])
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError());
}

function watch() {
    gulp.watch([wpStyleFiles, vcStyleFiles], css);
    gulp.watch([wpStyleFiles, vcStyleFiles], editorCSS);
    //gulp.watch(imgSRC, imgmin);
    gulp.watch([wpJsFiles, vcJsFiles], gulp.series( javascript));
    gulp.watch([wpThemeFiles, vcThemeFiles, jsDist + 'scripts.min.js', assets + 'build/css/theme.min.css']).on('change', reload);
}

exports.css = css;
exports.images = imgmin;
exports.editorCSS = editorCSS;
exports.javascript = javascript;
exports.watch = watch;

const build = gulp.series(watch);
gulp.task('default', build);

Достигнет ли мой текущий файл gulpfile того, к чему я стремлюсь?

Редактировать

Мне удалось устранить непредвиденную ошибку функции токена, последний const просто потребовал точку с запятой: wpJsFiles = js + '**/*.js';.

IЯ также изменил структуру папок, в основном это папка build , которая теперь содержит папки css и js:

theme
   assets
      build
         css
            theme.min.css
          js
             theme.min.js
      src
         sass
            globals
               _base.scss
               _client-styles.scss
            _variables.scss
            style.scss
    template-parts
       parts
           hero
              hero.php
              hero.scss
    style.css

Но теперь, когда я запускаю gulp, я получаю сообщения об ошибках:

Starting 'default'...
Starting 'watch'...
'watch' errored after 9.44 ms
ReferenceError: vcStyleFiles is not defined 

Не знаю почему, потому что vcStyleFiles определено, а theme.min.css и theme.min.js существуют в папке build ?

Обновлен gulpfile.js:

const assets = 'assets/';
const wpComponents = 'template-parts/';

const gulp          = require('gulp'),
      autoprefixer  = require('gulp-autoprefixer'),
      sass          = require('gulp-sass'),
      concat        = require('gulp-concat'),
      uglify        = require('gulp-uglify'),
      sassGlob      = require('gulp-sass-glob');
const plumber       = require('gulp-plumber'),
      eslint        = require('gulp-eslint');
const scss          = assets + 'src/sass/',
      js            = assets + 'src/js/',
      jsDist        = assets + 'build/js/';
const wpThemeFiles    = wpComponents + '**/**/*.php',
      wpStyleFiles    = scss + '**/*.scss',
      wpJsFiles       = js + '**/*.js';

function css() {
  return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss',scss + 'style.scss'], { sourcemaps: true })
    .pipe(sassGlob())
    .pipe(plumber())
    .pipe(sass({
      outputStyle: 'expanded'
    }).on('error', sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(concat('theme.min.css'))
    .pipe(gulp.dest(assets + 'build/css/', { sourcemaps: '.' }));
}

function editorCSS() {
  return gulp.src(scss + 'style-editor.scss', { allowEmpty: true })
    .pipe(sass({
      outputStyle: 'compressed'
    }).on('error', sass.logError))
    .pipe(gulp.dest(assets + 'build/css/'));
}

function javascript() {
  return gulp.src([
     'node_modules/jquery/dist/jquery.min.js',
     'node_modules/bootstrap/dist/js/bootstrap.min.js',
     wpJsFiles,
     vcJsFiles
    ])
    .pipe(plumber())
    .pipe(concat('theme.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest(jsDist));
}

// Lint scripts
function scriptsLint() {
  return gulp
    .src([wpJsFiles, vcJsFiles, "./gulpfile.js"])
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError());
}

function watch() {
    gulp.watch([wpStyleFiles, vcStyleFiles], css);
    gulp.watch([wpStyleFiles, vcStyleFiles], editorCSS);
    gulp.watch([wpJsFiles, vcJsFiles], gulp.series( javascript));
    gulp.watch([wpThemeFiles, vcThemeFiles, jsDist + 'scripts.min.js', assets + 'build/css/theme.min.css']);
}

exports.css = css;
exports.editorCSS = editorCSS;
exports.javascript = javascript;
exports.watch = watch;

const build = gulp.series(watch);
gulp.task('default', build);