После запуска gulp watch сервер live live работает.Если я внесу изменения в JS ничего не произойдет.Мне нужно увидеть изменения в браузере после изменения JS.Я не могу использовать другой метод, такой как webpack-dev-server, потому что я хочу использовать gulp watch для scss, img и других задач.После изменений в JS похоже, что что-то вычисляется ([Browsersync] Перезагружает браузеры ...) и блокирует следующие изменения.
const gulp = require("gulp")
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const browserSync = require('browser-sync').create()
const webpackConfigDev = {
entry: {
main: [
'./src/js/main.js',
'webpack/hot/dev-server',
'webpack-hot-middleware/client'
]
},
output: {
path: __dirname + 'dist/js',
filename: 'main.js'
},
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}
gulp.task('webpack', function () {
return new Promise(resolve => webpack(config, (err, stats) => {
if (err) console.log('Webpack', err)
console.log(stats.toString({ /* stats options */ }))
resolve()
}))
})
// watch functions
function serve() {
return browserSync.init({
server: './dist',
port: 4500,
open: true,
middleware: [
webpackDevMiddleware(webpack(webpackConfigDev), { /* options */ }),
webpackHotMiddleware(webpack(webpackConfigDev))
],
});
}
gulp.task('watch', function() {
serve()
gulp.watch("./src/js/**/*.js", gulp.series(browserSync.reload))
});
gulp.task('watch', gulp.series('watch'))
Заранее спасибо.