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...