意外的令牌功能+缩小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';。

我还更改了文件夹结构，主要是 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且 build 文件夹中存在theme.min.css和theme.min.js？

更新的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);