Gulp / BrowserSync заставляет браузер перезагружаться и оставаться на той же странице, для разработки WordPress темы

Не могу заставить этот скрипт работать, а также нужен совет:

Как сделать так, чтобы браузер перезагружался, когда я изменял какие-либо файлы после начальной загрузки?

Есть ли способ, когда браузер перезагрузить, чтобы остаться на той же странице (скажем, страница http://wpsass.dev/sass/mixin) и не перезагрузить базовый URL ( http://wpsass.dev/)

Я пытаюсь это для разработки WordPress темы.

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var autoprefixer = require('gulp-autoprefixer');

var theme = 'theme';

gulp.task('sass', function() {
  return gulp.src('code/wp-content/themes/'+theme+'/app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
    .pipe(sass({
     includePaths: [
      'node_modules/susy/sass',
      'node_modules/node-normalize-scss'
     ],
      outputStyle: 'expanded', // for production outputStyle: 'compressed'
      debugInfo: true,
    }))
    .pipe(autoprefixer({
      browsers: ['last 5 versions'],
      cascade: false
    }))
    .pipe(gulp.dest('code/wp-content/themes/'+theme+'/dist/css/'))
    .pipe( browserSync.stream() )
});

gulp.task('scripts', function() {
  return gulp.src([
      'code/wp-includes/js/jquery/jquery.js',
      'code/wp-includes/js/jquery/jquery-migrate.js',
      'code/wp-includes/js/wp-embed.js',
      'code/wp-content/themes/'+theme+'/app/js/script.js'
    ])
    .pipe(concat('all.js')) // concat all files in one file all.js
    .pipe(gulpIf('*.js', uglify())) // minify file if is .js format
    .pipe(gulp.dest('code/wp-content/themes/'+theme+'/dist/js/'))
    .pipe( browserSync.stream() )
});

gulp.task('watch', ['sass', 'scripts'], function (){
  browserSync.init({
    injectChanges: true,
    proxy: {
    target: "wpsass.dev",
      ws: true
    }
  });

  gulp.watch('code/wp-content/themes/'+theme+'/app/scss/**/*.scss', ['sass'] );
  gulp.watch('code/wp-content/themes/'+theme+'/app/js/**/*.js', ['scripts']);
  gulp.watch('code/wp-content/themes/'+theme+'/**/*.php', browserSync.reload);
});

Терминальный результат:

PS D:\Projects\wp-sass> gulp watch
[15:25:45] Using gulpfile D:\Projects\wp-sass\gulpfile.js
[15:25:45] Starting 'sass'...
[15:25:45] Starting 'scripts'...
[15:25:48] Finished 'sass' after 3.08 s
[15:25:48] Finished 'scripts' after 3.08 s
[15:25:48] Starting 'watch'...
[15:25:48] Finished 'watch' after 276 ms
[BS] Proxying: http://wpsass.dev
[BS] Access URLs:
 -----------------------------------
       Local: http://localhost:3000
    External: http://10.2.101.8:3000
 -----------------------------------
          UI: http://localhost:3002
 UI External: http://10.2.101.8:3002
 -----------------------------------
[BS] Reloading Browsers...

0 ответов

Другие вопросы по тегам