在吞咽和浏览器同步问题中观看新文件 [英] Watch new file in gulp and browsersync issue

问题描述

我使用浏览器同步来在文件更改时重新加载浏览器。这是完美的工作。
但是，当我创建新的文件，如html - scss - js bowsersync不工作！
如何解决这个问题？

gulpjs：
$ b

//浏览器Syncgulp.task（'browser-sync'，function（）{browserSync（{injectChanges：true，notify：false，server：app}）;}）; gulp.task（'default'，['sass'， （'change'，reload）; gulp.watch（'app / img / *'）; 。''，['bs-reload'，'images']）; gulp.watch（'src / scss / ** / *。scss'，['sass']）; gulp.watch（'src / js / ** / *。js'，['scripts'，'uglify']）;}）;

解决方案

原来这个解决方案相当简单。不要使用gulp.watch。改用browserSync.watch。我也将重新组织你的任务，并添加一个配置。它有助于在这种情况下：

gulpfile.js

  // -------------------------------------------------- ---- Config 
 var config = {
 bs：{
 opts：{
 injectChanges：true，
 notify：false，
 server：应用
，
观看：[
'app / ** / *。html'，
'app / img /*.*'，
'src /js/**/*.js'
] 
} 
} 
 
 // --------------- ---------------------------------浏览器同步
 gulp.task（'浏览器同步'，功能（）{
 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）; 
}）; 
 
 // ---------------------------------------- -------------默认
 gulp.task（'default'，['sass'，'scripts'，'browser-sync']）; 
  

这应该有效。我希望它有帮助。

I'm use browsersync to reload browser when file changed. and it's work perfect. But when i create new file such as html - scss - js bowsersync don't work !!! How to fix this problem?

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']);
});

解决方案

Turns out the solution is rather simple. Don't use gulp.watch. Use browserSync.watch instead. I'm also going to reorganize your task, and add a config. It helps in this instance:

gulpfile.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' ] );

That should work. I hope it helps.

这篇关于在吞咽和浏览器同步问题中观看新文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！