SCSS 和浏览器加载不适用于 gulpfile.js

Question

我在 wp-content 目录中有一个名为 wonaco 的 WordPress 主题。在这个文件夹中，我有这个 gulpfile.js 文件：

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var cssnano = require('gulp-cssnano');
var uglify = require('gulp-uglify');
var pipeline = require('readable-stream').pipeline;

gulp.task('sass', function() {
    return gulp.src('wanoca/scss/**/*.scss')
        .pipe(sass())
        .pipe(cssnano())
        // concat will combine all files declared in your "src"
        .pipe(concat('main.css'))
        .pipe(gulp.dest('wanoca/assets/css'))
        .pipe(browserSync.reload({
            stream: true
        }))
});

gulp.task('browserSync', function(done) {
    browserSync.init({
        server: {
            baseDir: 'wanoca'
        },
    });
    done();
})

gulp.task('compress', function() {
    return pipeline(
        gulp.src('wanoca/js/*.js'),
        uglify(),
        gulp.dest('wanoca/assets/js')
    );
});

gulp.task('watch', gulp.series('browserSync', 'sass', 'compress', function() {
    gulp.watch('wanoca/scss/**/*.scss', gulp.series('sass'));
    gulp.watch('wanoca/js/*.js', gulp.series('compress'));
    gulp.watch("wanoca/**/*.html", { events: 'all' }, function(cb) {
        browserSync.reload();
        cb();
    });
    gulp.watch('wanoca/js/**/*.js', browserSync.reload);
}));

我的主题文件夹结构是这样的：

assets
inc
js
languages
node_modules
page_templates
scss
template-parts
.gitignore
all WordPress files...

我正在尝试将 scss 和 js 文件夹代码编译为 assets/css 和 assets/js

但是使用我当前的 gulpfile.js 文件代码它没有观察任何 scss 更改并且没有使用正确的 URL 将更改加载到浏览器。

正确的 URL 是 http://localhost/wanoca-wp/

你们能告诉我如何解决它吗？

Answer 1

您的节点、包和 gulp 文件必须位于 wp 应用程序主文件夹之外，即。