Question

我在使用BrowserSync进行实时重新加载时遇到问题。如果它有任何不同，我有一个wordpress网站。除了实时重载/注入之外的所有内容似乎都能正常工作。我有一个Gulp设置，如下所示：

var gulp = require('gulp');
    var jshint = require('gulp-jshint');
    var concat = require('gulp-concat');
    var rename = require('gulp-rename');
    var uglify = require('gulp-uglify');
    var sass = require('gulp-sass');
    var autoprefixer = require('gulp-autoprefixer');
    var minifyCSS = require('gulp-minify-css');
    var del = require('del');
    var browserSync = require('browser-sync');
    var reload = browserSync.reload;

// ==== CONFIGURATION ==== //
// Project paths
var src         = 'assets/',
    dist        = 'dist/',
    bower       = src + 'bower_components/',
    css         = dist + 'css/',
    js          = dist + 'js/'
;


// Lint and minify our Javascript files
gulp.task('js-linting-compiling', ['clean'], function(){

    // read all of the files that are in script/lib with a .js extension
    return gulp.src('assets/js/*.js')
        // run their contents through jshint
        .pipe(jshint())
        // report any findings from jshint
        .pipe(jshint.reporter('default'))
        // concatenate all of the file contents into a file titled 'all.js'
        .pipe(concat('all.js'))
        // write that file to the dist/js directory
        .pipe(gulp.dest(js))
        // now rename the file in memory to 'all.min.js'
        .pipe(rename('all.min.js'))
        // run uglify (for minification) on 'all.min.js'
        .pipe(uglify())
        // write all.min.js to the dist/js file
        .pipe(gulp.dest(js));
});


// Compile SASS into CSS, autoprefix it and minify it
gulp.task('sass-to-css', ['clean'], function () {
    gulp.src('assets/sass/**/*.scss')
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest(css))
        .pipe(rename({ suffix: '_min' }))
        .pipe(minifyCSS({keepSpecialComments:0}))
        .pipe(gulp.dest(css))
        .pipe(reload({stream: true}));
});


// Clean our dist folder before we generate new content into it
gulp.task('clean', function (cb) {
  del([
    // here we use a globbing pattern to match everything inside the `dist` folder
    'dist/**',
  ], cb);
});


// ### Build
// `gulp build` - Run all the build tasks but don't clean up beforehand.
// Generally you should be running `gulp` instead of `gulp build`.
gulp.task('build', ['clean', 'sass-to-css', 'js-linting-compiling'], function() {
});


// ### Gulp
// `gulp` - Run a complete build. To compile for production run `gulp --production`.
gulp.task('default', ['clean'], function() {
  gulp.start('build');
});


// ### Watch
// `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code
// changes across devices. Specify the hostname of your dev server at
// `manifest.config.devUrl`. When a modification is made to an asset, run the
// build step for that asset and inject the changes into the page.
// See: http://www.browsersync.io
gulp.task('watch', function() {
  browserSync({
    proxy: "local.project.dev",
    host: "localhost",
    notify: false,
  });
  gulp.watch(['assets/sass/**/*'], ['sass-to-css']);
  gulp.watch(['assets/js/**/*'], ['js-linting-compiling']);
  gulp.watch('**/*.php', function() {
    browserSync.reload();
  });
});

这是终端在更新* .scss文件（运行gulp watch）时显示的内容。

[13] → gulp watch
[11:39:17] Using gulpfile ~/sites/VVV/www/local.project.dev/htdocs/app/themes/mytheme/gulpfile.js
[11:39:17] Starting 'watch'...
[11:39:19] Finished 'watch' after 1.4 s
[BS] Proxying: http://local.project.dev
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.111:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.111:3001
 --------------------------------------
[11:40:10] Starting 'clean'...
[11:40:10] Finished 'clean' after 6.12 ms
[11:40:10] Starting 'sass-to-css'...
[11:40:10] Finished 'sass-to-css' after 6.54 ms
[BS] 1 file changed (style_min.css)

有什么想法吗？

Answer 1

您告诉浏览器同步仅重新加载缩小的css版本。您可能在页面中使用了非缩小版本，这会导致问题。

所以重新加载只是非缩小的：

.pipe(gulp.dest(css))
.pipe(reload({stream: true}))
.pipe(rename({ suffix: '_min' }))
.pipe(minifyCSS({keepSpecialComments:0}))
.pipe(gulp.dest(css));

或两者：

.pipe(gulp.dest(css))
.pipe(reload({stream: true}))
.pipe(rename({ suffix: '_min' }))
.pipe(minifyCSS({keepSpecialComments:0}))
.pipe(gulp.dest(css))
.pipe(reload({stream: true}));

..或在页面中使用缩小版。

BrowserSync重新加载不起作用（wordpress网站）

1 个答案: