Глоток не минимизируя css и JS в указанных файлах - PullRequest
1 голос
/ 25 сентября 2019

Я запускаю 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);

1 Ответ

0 голосов
/ 25 сентября 2019

Ваш импорт style.scss правильно ссылается на каталоги других файлов scss?

Похоже:

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

ищет дополнительный каталог глубжечем файл на самом деле находится

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...