javascript - Watch new file in gulp and browsersync issue -
i'm use browsersync reload browser when file changed. , it's work perfect. when create new file such html - scss - js bowsersync don't work !!! how fix 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 solution rather simple. don't use gulp.watch. use browsersync.watch instead. i'm going reorganize task, , add config. helps in 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. hope helps.
Comments
Post a Comment