javascript - 在 gulp 和浏览器同步问题中观看新文件

Question

当文件更改时，我使用 browsersync 重新加载浏览器。它工作完美。但是当我创建新文件时，例如 html - scss - js bowsersync 不起作用!如何解决这个问题？

gulpjs:

// Browser Sync
gulp.task('browser-sync', function() {
    browserSync({
        injectChanges: true,
        notify: false,
        server:  "app"
    });
});


gulp.task('default',['sass','scripts', 'browser-sync'], function(){
    gulp.watch("app/**/*.html").on('change', reload);
    gulp.watch('app/img/*.*', ['bs-reload','images']);
    gulp.watch('src/scss/**/*.scss', ['sass']);
    gulp.watch('src/js/**/*.js', ['scripts','uglify']);
});

Answer 1

事实证明，解决方案相当简单。不要使用 gulp.watch。请改用 browserSync.watch。我还将重新组织您的任务，并添加一个配置。它在这种情况下有帮助:

gulp文件.js

// ------------------------------------------------------ Config
var config = {
    bs: {
        opts: {
            injectChanges: true,
            notify: false,
            server:  "app"
        },
        watch: [
            'app/**/*.html',
            'app/img/*.*',
            'src/js/**/*.js'
        ]
    }
}

// ------------------------------------------------ Browser Sync
gulp.task('browser-sync', function() {
    browserSync.init( config.bs.opts );

    browserSync.watch( './src/scss/**/*.{scss,sass}', [ 'sass' ] );
    browserSync.watch( 'src/js/**/*.js', [ 'scripts', 'uglify' ] );
    browserSync.watch( 'app/img/*.*', [ 'images' ] );
    browserSync.watch( config.bs.watch ).on('change', reload);
});

// ----------------------------------------------------- Default
gulp.task( 'default', [ 'sass','scripts', 'browser-sync' ] );

那应该行得通。希望对您有所帮助。