javascript - Gulp / BrowserSync make browser reload and stay on the same page, for wordpress theme developement -
can't make script work, , need advice:
how make browser reload when change of files after initial load?
is there way, when browser reload stay on same page (say page http://wpsass.dev/sass/mixin) , not reload base url (http://wpsass.dev)
i'm trying wordpress theme development.
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 files ending .scss in app/scss .pipe(sass({ includepaths: [ 'node_modules/susy/sass', 'node_modules/node-normalize-scss' ], outputstyle: 'expanded', // 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 files in 1 file all.js .pipe(gulpif('*.js', uglify())) // minify file if .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); });
terminal result:
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...
Comments
Post a Comment