0

Can't make this script work, and also need advice:

How to make browser reload when i change any of the files after initial load?

Is there any way, when browser reload to stay on the same page (say page http://wpsass.dev/sass/mixin) and not reload the base url (http://wpsass.dev)

I'm trying this for a 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 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);
});

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...
  • What exactly isn't working? Because from what the terminal shows, the server is up and running. I can see that you probably should use browserSync.reload() instead of browserSync.stream() in your scripts task. But I'm not sure if that is actually the problem that you are having. – Jon Nov 10 '16 at 15:54
  • Problem is that browsersync is not conected to the browser, yes it opens the app in the browser on initial lunch of gulp task 'watch', but afterwards on any changes in files browser isn't reloaded. My guess is, i'm not configuring the browsersync server right. – Igor Atanasov Nov 11 '16 at 07:57
  • 1
    Also tried replacing browserSync.stream() with browserSync.reload(), same thing. – Igor Atanasov Nov 11 '16 at 08:08
  • i have the same problem – valerio0999 Jun 05 '20 at 10:16

0 Answers0