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