I'm trying to use browsersync without Gulp, just plain old html and css, but it won't update any changes made to css. The browsersync shows that it's connected when I open the page through the terminal, but it isn't injecting CSS when I change/add CSS in the project and the terminal just shows this:
[BS] Serving files from: ./
[BS] Watching files...
Okay, so like I said in my previous (deleted) answer, I had the same troubles. Server started, "Connected to BrowserSync" popped up on browser, but no reload when I change anything to my html.
At first, I thought it was Chokidar that was the problem. So I updated it with npm install -g chokidar and npm install chokidar --save. However, when I got home (I had the problem on both my work and home computer), this fix didn't work. Then I noticed this worked: browser-sync start --server --files "*.html", but this failed: browser-sync start --server --files "css/*.css, *.html, js/*.js". That last one is a .bat file I used on my previous project.
So, I started googling and found a different syntax. I changed my command and now it works: browser-sync start --server --files "css/*.css" "*.html" "js/*.js"
(mind the spaces and quotes instead of comma's)
I have no idea if I'm seeing ghosts, or if the syntax actually changed.
Related
Hello All and I was wondering if anyone uses Browser-sync with NotePad++. I use both VS Code and still fall back to Notepad++ when learning or experimenting. As of February 5th I could still use it globally as the simple web server and for hot reload.
I have it installed -g with npm and use a simple script loaded into the directory from cmd.
browser-sync start --server --no-notify --files "html/*.html", "js/*.js", "css/*.css"
That was all I had to do to localhost:3000 to load the HTML with all CSS styles and JavaScript.
But now it opens to the port 3000 but with a "Cant/Get" message and a console error message.
It always listed a warning message in the console. That you are not to use document.write(), but I guess it was part of how Browser-sync was set up. Now this is the error that it throws.
But in the terminal it shows Browser-sync watching ....
I was wondering if they thought it a vulnerability and now require a config file and it listed as a saved dev dependencies??
It was nice to use Notepad++ with the hot reload and using the cmd is good practice. You get spoiled with VS Code and the other IDEs.
Just wondering if anyone can make sense of the error message in the console. Or still can get it to work on a global level.
I'm learning Laravel in combination with Vue and I installed Browsersync to make the process smoother. When I first installed it worked flawlessly.
My setup is the following:
Browsersync installed locally with npm i browser-sync --save-dev
Project location: C:\WEB\project_folder\
php -S localhost:8000 -t public to serve the app. If I go to localhost:8000 it works as expected
added mix.browserSync({proxy: 'localhost:8000', browser: "C:\\Program Files (x86)\\Google\\Chrome Beta\\Application\\chrome.exe", notify: false}); in webpack.mix.js
npm run watch to build and run Browsersync
Strange thing is that the Browsersync UI works properly if I acces localhost:3001, even from another device in the network.
I observed it wasn't working anymore while creating another project where I use Parcel for bundling instead of webpack/laravel-mix. There I use the Browsersync CLI, running .\node_modules\.bin\browser-sync start --proxy localhost:8000 --no-notify --cwd 'C:\WEB\project_folder' -f 'public'
I did not update Node, npm or the OS in the meantime. The only thing I installed is the game Valorant which has some fancy anti cheat service that is installed, but I disabled that service.
I tried:
multiple browsers and devices
switching the order in which I start the server and Browsersync
the development folder was on another partition and I recently moved it to C: so I tried moving the project in the previous location
thinking really hard about the meaning of life :)
I guess next time I will use Docker to have a isolated environment.
I'm stumped. Any ideas? Have anyone encountered and solved this?
This was possibly caused by Windows. I've installed kb4571744 and everything works again.
I created a Hello World application using this tutorial.
When I build the application from the terminal in VS Code typing npm start VS Code or npm, no clue who, will open a new browser window... without even an url or anything in it.
Is there anyway to prevent this from happening? i.e. if I type in the console npm start I do not mind what happens but I want to avoid to open automatically a window of my browser.
Try to run BROWSER=none npm start or create an .env file with BROWSER=none. Refer to Advanced Configuration of create-react-app official docs
You can create a .env file at the root of your project and insert the BROWSER=none npm start property.
An alternative would be direct throught terminal, like this: set BROWSER=NONE && npm start
Here you can see the discussing about that.
I am using Laravel 5.3, node version: 5.7 and npm version: 3.6.
When I run the gulp (or even gulp watch) command I get the same output in terminal as I normally get, everything looks like it should, and it even tells me that it has written to the public/css folder (image below). Navigating to the folder I can see no changes were made to the previous app.css file.
When I delete the file, the css directory remains empty after the gulp commands.
This is my gulpfile.js
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir(mix => {
mix.sass('app.scss')
.webpack('app.js');
});
This is the output I get in the terminal (iTerm on mac OSX):
But lik I said, the public folder remains empty. I can't tell for sure that I updated node or npm or not.. But I don't think I have.
Thanks for the help.
EDIT:
deleting the node-modules folder and running npm install again gives another error.. One I have never seen before:
I have nodejs, grunt and npm installed, did it months ago was able run things and then I had a project come up so wasn't able to dive into it as much as I wanted, but I know it was all setup correctly. Now months later I need to get "styl"
https://www.npmjs.com/package/styl
working. I installed it like the instructions say to
npm install -g styl
I'm at the directory I want to be and tried to run
styl style.style style.css
and it wont run, it just sits there
I'm on windows 7.
If that css file is written in SASS-style with nesting, you have to pass -w flag to use "significant whitespace pre-processor".
As shown in the example, you have to enable the following command: (with the angle brackets)
$ styl -w < style.style > style.css
Otherwise, it produces empty style.css file.