WordPress + Gulp - browserSync不会更新我的.php文件

jhdbpxl9  于 9个月前  发布在  Gulp
关注(0)|答案(1)|浏览(150)

SCSS和JS文件的工作方式和以前一样,但当我保存.php文件时,它会重新加载浏览器,但不会更新HTML。
这是我的gulpfile.js
我试着分离手表功能,并试图添加一些延迟,但没有成功

const gulp = require('gulp');
const { src, dest, watch, series } = require('gulp');

 // styles
      const scss = require('gulp-sass')(require('sass'));
      const autoprefixer = require('gulp-autoprefixer');
      const cssMinify = require('gulp-clean-css');
      const concat = require('gulp-concat');
      const browserSync = require('browser-sync').create();

      function styles(){
            return src([
                  './wp-content/themes/savez-tema/src/scss/vendor/_bootstrap.min.scss',
                  './wp-content/themes/savez-tema/src/scss/**/*.scss'
            ])
                  .pipe( scss() )
                  .pipe( autoprefixer('last 2 versions') )
                  .pipe( cssMinify() )
                  .pipe( dest('./wp-content/themes/savez-tema/dist/css'))
                  .pipe(browserSync.stream()); 
      }
 // scripts
 const jsMinify = require('gulp-terser');

 function scripts(){
      return src ([
            './wp-content/themes/savez-tema/src/js/vendor/bootstrap.min.js',
            './wp-content/themes/savez-tema/src/js/**/*.js'
      ])
            .pipe(concat('main.js'))
            .pipe( jsMinify() )
            .pipe( dest('./wp-content/themes/savez-tema/dist/js'))
            .pipe(browserSync.reload({stream: true})); // proveri
 }

 // watch
function watchTask(){
      browserSync.init({
            proxy: 'http://localhost:8888/savez', 
      });
      
      watch(['./wp-content/themes/savez-tema/**/*.php', './wp-content/themes/savez-tema/src/scss/**/*.scss', './wp-content/themes/savez-tema/src/js/**/*.js'],

      series(styles, scripts))
}

exports.default = series(styles, scripts, watchTask)

字符串

j2cgzkjk

j2cgzkjk1#

在花了很多时间尝试不同的aproaches这里是工作解决方案:
P.S -如果使用MAMP禁用PHP缓存这是必须的!

// REQUIREMENTS
const { src, dest, watch, series, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const rename = require('gulp-rename');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();
const php = require('gulp-connect-php');

// PATHS
const paths = {
  scss: {
    src: './wp-content/themes/savez-tema/src/scss/**/*.scss',
    dest: './wp-content/themes/savez-tema/dist/css'
  },
  js: {
    src: './wp-content/themes/savez-tema/src/js/**/*.js',
    dest: './wp-content/themes/savez-tema/dist/js/'
  }
};

// BROWSER SYNC WITH PHP INSIDE SERVER
function sync() {
  php.server({
    base: './savez/',
    port: 3000,
    keepalive: true,
    // custom PHP locations
    bin: '/Applications/MAMP/bin/php/php7.4.33/bin/php',
    ini: '/Applications/MAMP/bin/php/php7.4.33/conf/php.ini',
    reloadOnRestart: true,
  });
  browserSync.init({
    proxy: "http://localhost:8888/savez/",
    baseDir: "./savez",
    notify: false,
    reloadOnRestart: true,
  });
}

// TASKS
function compileSass() {
  return src(paths.scss.src)
    .pipe(sourcemaps.init())
    .pipe(sass({
      outputStyle: 'compressed'
    }))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(rename({ extname: ".min.css" }))
    .pipe(sourcemaps.write())
    .pipe(dest(paths.scss.dest))
    .pipe(browserSync.stream());
}

function compileJs() {
  return src(paths.js.src)
    .pipe(sourcemaps.init())
    .pipe(concat('main.js'))
    .pipe(sourcemaps.write())
    .pipe(dest(paths.js.dest))
    .pipe(browserSync.stream());
}

// WATCH
function watchSass() {
  watch(paths.scss.src, compileSass)
}

function watchJs() {
  watch(paths.js.src, compileJs)
  console.log(paths.js.src, compileJs);
}

function watchPhp() {
  watch(['./wp-content/themes/savez-tema/**/*.html', './wp-content/themes/savez-tema/**/*.php']).on('change', browserSync.reload);
}

// DEFAULT TASK
exports.default = series(compileSass, compileJs, parallel(sync, watchSass, watchJs, watchPhp))

字符串

相关问题