Question

我正在运行gulp，试图编译并缩小主题中找到的所有scss和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.scss的样子（assets > src > style.scss）：

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

我的目标是，在运行gulp时，将style.scss文件中的所有内容编译为theme.min.css（assets > build > css）。

但是，在运行gulp时，theme.min.css文件为空吗？就像什么也没有被编译和缩小。不确定我的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], css);
    gulp.watch([wpStyleFiles], editorCSS);
    gulp.watch([wpJsFiles], gulp.series( javascript));
    gulp.watch([wpThemeFiles, 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);

Answer 1

您的style.scss导入是否正确引用了其他scss文件的目录吗？

它看起来像：

@import "globals/**/**.scss";

正在搜索比文件实际位置更深的额外目录

Gulp不缩小指定文件中的CSS和JS

1 个答案: