Browser-sync doesn't reload pages
With the below package.json
file, my CSS and js compile OK and open a browser window proxying the correct site. But saving changes in files isn't causing the browser to refresh.
{
"scripts": {
"watch:css-app": "tailwindcss -i ./src/css/app.css -o ./public_html/assets/css/app.css --postcss --watch",
"watch:js": "./node_modules/.bin/esbuild ./src/js/app.js --bundle --outfile=./public_html/assets/js/app.js --watch",
"watch": "cross-env NODE_ENV=development concurrently 'npm run watch:css-app' 'npm run watch:js'",
"browser-sync": "cross-env NODE_ENV=development browser-sync start --proxy='https://site.local/' --files='./*'",
"watch-sync": "concurrently 'npm run browser-sync' 'npm run watch'"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"browser-sync": "^2.23.0",
"concurrently": "^6.2.1",
"cross-env": "^6.0.3",
"postcss": "^8.4.20",
"postcss-import": "^15.1.0",
"resolve-url-loader": "^3.1.2",
"tailwindcss": "^3.2.4"
}
}
I've tried a few different things in the --files
option:
--files='./path_to_html/**/*.html,./path_to_css/**/*.css'
--files=['./path_to_html/**/*.html','./path_to_css/**/*.css']
- omit
--files
and have--watch
instead
But none of those work. Just to be clear, I'm not using Webpack, Gulp etc., I'm just calling npm run watch-sync
and package.json
is doing the rest.
Anyone know what I'm missing from my config to get this working?
Edit: I've changed things up a bit, but still getting the same result.
Now I've changed my browser-sync
script to "browser-sync": "cross-env NODE_ENV=development node bs.js"
and bs.js
looks like:
const bs = require('browser-sync').create();
bs.emitter.on('init', function () {
console.log('Browsersync is running!');
});
bs.watch('*.html').on('change', bs.reload);
bs.watch('*.css', function (event, file) {
if (event === 'change') {
bs.reload('*.css');
}
});
bs.init({
proxy: 'https://td.local/'
});
As before, when running the script, a new window is launched that loads the site, but changes to files don't cause a reload and also, I'm not getting the message in the console even though the init
is telling the script which URL to proxy and it's doing that part. :?
Comments
Post a Comment