Question

让Browsersync使用我的Gulp文件，但是当我对browser-sync文件进行更改时，我一直在努力让browserync自动重新加载我的静态网站。我已经完全按照网页上的所有文档进行操作，但仍然无法让页面自动刷新。

我知道我与gulp集成的部分工作正在运行，因为当我运行与main.scss任务相关联的默认gulp任务时，浏览器窗口会激活服务器，但是当我对我的{{ {1}}文件没有自动重新加载。我必须手动刷新才能看到更改。

这是我的gulpfile ..我在这里想念的是什么？

// refferance gulp
var gulp = require('gulp');

// browser-sync
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// other packages installed
var concat = require('gulp-concat');
var cssmin = require('gulp-minify-css');
var rename = require('gulp-rename');
var scss = require('gulp-sass');
var uglify = require('gulp-uglify');

// browser-sync task
gulp.task('browser-sync',['styles'] , function(){
    browserSync.init({
        server:'./'
    });
    gulp.watch('.//src/scss/*.scss',['styles']);
    gulp.watch('.//*.html').on('change',browserSync.reload);
});

// scripts task
gulp.task('scripts', function(){
    // fetch all files in the .js extension in the /src/js directory
    return gulp.src('./src/js/*.js')
    // concatenate files and save as app.js
    .pipe(concat('app.js'))
    // save app.js in dest directory
    .pipe(gulp.dest('./dest/js/'))
    .pipe(uglify())
    // minfiy file and rename to app.min.js
    .pipe(rename({
        suffix: '.min'
    }))
    // save in dest directory
    .pipe(gulp.dest('./dest/js'));
});


// styles task
gulp.task('styles', function(){
     // fetch all files with scss extension in /src/scss directory
    return gulp.src('./src/scss/*.scss')
    // compile scss
    .pipe(scss())
    // output css in css dest directory
    .pipe(gulp.dest('./dest/css/'))
    // minify css
    .pipe(cssmin())
    // rename as styles.min.css
    .pipe(rename({
        suffix: '.min'
    }))
    // save in same directory
    .pipe(gulp.dest('./dest/css'))
    // reload browser by injecting css into browser via browsersync
    // .pipe(reload({stream:true}));
    .pipe(browserSync.stream());
});

gulp.watch('./src/js/*.js', ['scripts']);


// we use the watch task in the default task bellow
gulp.task('watch',function(){
    // watch js
    gulp.watch('./src/js/*.js',['scripts']);
    // watch scss
    gulp.watch('./src/scss/*.scss',['styles']);
});

// default task allows us to run all tasks at once by just running `gulp` in command line

gulp.task('default', ['scripts', 'styles', 'browser-sync', 'watch']);

Answer 1

如果你拿出

gulp.watch('.//src/scss/*.scss',['styles']);
gulp.watch('.//*.html').on('change',browserSync.reload);

并替换为

gulp.watch('dest/**/*.html').on('change', browserSync.reload);

如果您正在查看位于dest目录下的HTML文件，您应该会看到更改。

我还会检查您的styles和scripts任务是否正在解雇。你应该在terminal / cli中看到这个。如果他们正在开火，也会记录任何重新加载。

希望能帮到你！

Browsersnyc不会自动重新加载对css所做的更改

1 个答案: